Repository: DataV-Team/DataV
Branch: master
Commit: 417ade755ceb
Files: 219
Total size: 1.3 MB

Directory structure:
gitextract_6ik26r78/

├── .github/
│   ├── ISSUE_TEMPLATE/
│   │   ├── bug_report.md
│   │   ├── feature_request.md
│   │   └── new_component_request.md
│   └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── README_EN.md
├── build/
│   ├── entry.js
│   ├── index.js
│   ├── plugin/
│   │   ├── exec.js
│   │   └── print.js
│   ├── rollup.config.js
│   └── rollup.terser.config.js
├── deploy/
│   ├── index.js
│   └── plugin/
│       ├── ftp.js
│       ├── nodeParams.js
│       └── print.js
├── dist/
│   ├── datav.map.vue.js
│   └── datav.min.vue.js
├── lib/
│   ├── components/
│   │   ├── activeRingChart/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── borderBox1/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── borderBox10/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── borderBox11/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── borderBox12/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── borderBox13/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── borderBox2/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── borderBox3/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── borderBox4/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── borderBox5/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── borderBox6/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── borderBox7/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── borderBox8/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── borderBox9/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── capsuleChart/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── charts/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── conicalColumnChart/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── decoration1/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── decoration10/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── decoration11/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── decoration12/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── decoration2/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── decoration3/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── decoration4/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── decoration5/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── decoration6/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── decoration7/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── decoration8/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── decoration9/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── digitalFlop/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── flylineChart/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── flylineChartEnhanced/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── fullScreenContainer/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── loading/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── percentPond/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── scrollBoard/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   ├── scrollRankingBoard/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       ├── main.css
│   │   │       └── main.vue
│   │   └── waterLevelPond/
│   │       ├── index.js
│   │       └── src/
│   │           ├── main.css
│   │           └── main.vue
│   ├── index.js
│   ├── mixin/
│   │   └── autoResize.js
│   └── util/
│       └── index.js
├── package.json
├── src/
│   ├── components/
│   │   ├── activeRingChart/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── borderBox1/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── borderBox10/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── borderBox11/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── borderBox12/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── borderBox13/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── borderBox2/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── borderBox3/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── borderBox4/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── borderBox5/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── borderBox6/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── borderBox7/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── borderBox8/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── borderBox9/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── capsuleChart/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── charts/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── conicalColumnChart/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── decoration1/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── decoration10/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── decoration11/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── decoration12/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── decoration2/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── decoration3/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── decoration4/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── decoration5/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── decoration6/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── decoration7/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── decoration8/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── decoration9/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── digitalFlop/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── flylineChart/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── flylineChartEnhanced/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── fullScreenContainer/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── loading/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── percentPond/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── scrollBoard/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   ├── scrollRankingBoard/
│   │   │   ├── index.js
│   │   │   └── src/
│   │   │       └── main.vue
│   │   └── waterLevelPond/
│   │       ├── index.js
│   │       └── src/
│   │           └── main.vue
│   ├── index.js
│   ├── mixin/
│   │   └── autoResize.js
│   └── util/
│       └── index.js
└── umdExample.html

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: 提交Bug反馈
---

<!-- 请确定这是一个Bug反馈，而不是一个需求反馈或问题求助，否则ISSUE可能被关闭 -->
<!-- 请提供可供复现Bug的必要条件，否则ISSUE可能被关闭 -->
<!-- 创建Bug反馈前请确定你的DataV是最新版的 -->

## Bug report

#### 出现Bug的组件？

#### 组件配置数据？
<!-- (config等props，若无配置请忽略) -->

#### 控制台错误输出？
<!-- (若无错误输出请忽略) -->

#### 期望情况？

#### 实际情况？

#### 其他相关信息

- DataV版本
- 浏览器版本
- 其他


================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: 新特性建议
---

<!-- 创建新特性建议前请确定你的DataV是最新版的 -->

## Feature request

#### 这个特性解决了什么问题？

#### 这个特性的实现形式？

#### 是否愿意为此特性提交PR？


================================================
FILE: .github/ISSUE_TEMPLATE/new_component_request.md
================================================
---
name: Component request
about: 新组件建议
---

<!-- 创建新组件建议前请确定你的DataV是最新版的 -->
<!-- (将[ ]修改为[x]) -->

## Component request

#### 新组件的类型？

* [ ] 边框
* [ ] 装饰
* [ ] 图表
* [ ] 其他

#### 这个组件的功能描述 (边框及装饰类，请提供样图)？

#### 是否愿意为此组件提交PR？


================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!-- (将[ ]修改为[x]) -->

**该PR的类型是？** (至少选择一个)

- [ ] Bug修复
- [ ] 新特性
- [ ] 新组件

**该PR是否向下兼容?** (选择任一)

- [ ] 是
- [ ] 否

如果为否，请描述冲突情况:

**涉及到的ISSUE:**

- [ ] 该PR如果涉及到某个ISSUE, 请在PR标题中描述出来 (例如. `fix #xxx[,#xxx]`, "xxx"为ISSUE序号)

**是否在Chrome浏览器下进行过测试？**

- [ ] 是
- [ ] 否

如果这是一个**新特性**或**新组件**相关的PR，请提供如下信息

- [ ] 添加该特性或组件的原因
- [ ] 文档应该修改哪些信息
- [ ] 测试相关

提交**新特性**或**新组件**前请先发起一个相关的ISSUE请求

**其他信息:**


================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
package-lock.json
/deploy/config.js

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
yarn.lock

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*




================================================
FILE: CHANGELOG.md
================================================
# 2.10.0-alpha (2020-09-09)

### New

- **decoration12:** New decoration(Radar scan).

### Optmization

- **decoration** add `dur` configuration.
- **activeRingChart** add `digitalFlopUnit` configuration.

# 2.9.9-alpha (2020-08-25)

### Optmization

- **borderBox:** Canonical class name.
- **autoResize(mixin):** Add exception prompt.

# 2.9.8-alpha (2020-08-20)

### Optmization

- **scrollRankingBoard:** Add value formatter.

# 2.9.7-alpha (2020-08-19)

### Optmization

- **scrollBoard:** Optimize the update effect of updateRows.

# 2.9.6-alpha (2020-08-05)

### Bug Fixes

- **scrollBoard:** Carousel is abnormal when carousel is page.
- **scrollRankingBoard:** Carousel is abnormal when carousel is page.

# 2.9.5-alpha (2020-08-05)

### Optmization

- **scrollBoard:** Reduce redundant node rendering.
- **scrollRankingBoard:** Reduce redundant node rendering.
- **scrollBoard:** Add api to update row data.

# 2.9.4-alpha (2020-07-03)

### Optmization

- **scrollBoard:** Optimize key value [(#8)](https://github.com/DataV-Team/DataV-React/issues/8).

# 2.9.3-alpha (2020-07-02)

### Perfect

- **uuid:** Optimization of `-` in uuid will cause abnormal svg animation [(#108)](https://github.com/DataV-Team/DataV/issues/108).

# 2.9.2-alpha (2020-06-16)

### Bug Fixes

- **scrollBoard:** reset animationIndex when config upate.

# 2.9.1-alpha (2020-06-16)

### Bug Fixes

- **scrollRankingBoard:** Calculation optimization of negative values [(#101)](https://github.com/DataV-Team/DataV/pull/101).

### Perfect

- **digitalFlop:** add number formatter.

# 2.9.0-alpha (2020-06-10)

### ScrollBoard

- **hoverPause:** add `hoverPause` configuration [(#96)](https://github.com/DataV-Team/DataV/pull/96).
- **mouseover:** add `mouseover` event [(#96)](https://github.com/DataV-Team/DataV/pull/96).

# 2.8.4-alpha (2020-05-25)

### Perfect

- **uuid:** Use uuid to produce unique id.

# 2.8.3-alpha (2020-05-06)

### Perfect

- **activeRingChart:** add `showOriginValue` configuration.
- **capsuleChart:** add `showValue` configuration.

# 2.8.2-alpha (2020-05-06)

### Perfect

- **borderBox8:** add `reverse` configuration.

# 2.8.1-alpha (2020-05-03)

### Perfect

- **digitalFlop:** Use `\n` to start a newline.
- **digitalFlop:** `rowGap` configuration.

# 2.7.4-alpha (2020-04-15)

### Bug Fixes

- **capsuleChart:** Calculate exception when min value is less 5 [(#59)](https://github.com/DataV-Team/DataV/pull/59).

# 2.7.3-alpha (2020-01-16)

### Bug Fixes

- **activeRingChart:** `parseInt` precision lost.

# 2.7.2-alpha (2020-01-10)

### Perfect

- **ativeRingChart:** Add digitalFlopToFixed configuration.

# 2.7.1-alpha (2020-01-08)

### Bug Fixes

- **flylineChartEnhanced:** Exception when relative is false.

# 2.7.0-alpha (2020-01-05)

### New

- **flylineChartEnhanced:** Enhanced flylineChart [(#12)](https://github.com/DataV-Team/DataV/issues/12).

# 2.6.0-alpha (2019-12-25)

### Perfect

- **scrollRankingBoard:** Configurable auto-sequencing [(#35)](https://github.com/DataV-Team/DataV/pull/35).
- **scrollRankingBoard:** Render name using `v-html` [(#36)](https://github.com/DataV-Team/DataV/pull/36).

# 2.5.0-alpha (2019-12-06)

### Feature

- **borderBox & decoration:** **Configurable** colors.
  ```html
  <!-- Example -->
  <dv-border-box-1 :color="['red', 'green']" />
  <dv-decoration-1 :color="['red', 'green']" />
  ```
- **scrollBoard:** Configurable index header [(#33)](https://github.com/DataV-Team/DataV/pull/33). 

### New

- **borderBox11**
- **borderBox12**
- **borderBox13**
- **decoration11**

# 2.4.8-alpha (2019-11-12)

### Bug Fixes

- **scrollBoard:** After updating props, the carousel speed is abnormal [(#25)](https://github.com/jiaming743/DataV/issues/16),[(#20)](https://github.com/jiaming743/DataV/issues/25).
- **scrollRankingBorad:** After updating props, the carousel speed is abnormal[(#25)](https://github.com/jiaming743/DataV/issues/16),[(#20)](https://github.com/jiaming743/DataV/issues/25).

# 2.4.7-alpha (2019-10-24)

### Perfect

- **charts:** Optimize memory leaks.
- **digitalFlop:** Optimize memory leaks.

# 2.4.6-alpha (2019-10-24)

### Bug Fixes

- **activeRingChart:** Optimize memory leaks [(#16)](https://github.com/jiaming743/DataV/issues/16),[(#20)](https://github.com/jiaming743/DataV/issues/20).

# 2.4.5-alpha (2019-09-24)

### Bug Fixes

- **activeRingChart:** Calculation exception due to data value being 0 [(#17)](https://github.com/jiaming743/DataV/issues/17).

# 2.4.4-alpha (2019-09-05)

### Bug Fixes

- **scrollBoard:** Header column width is abnormal when row data is empty.

# 2.4.3-alpha (2019-09-04)

### Perfect

- **scrollRankingBoard:** Add a unit configuration item.

# 2.4.2-alpha (2019-08-30)

### Perfect

- **capsuleChart:** Class name compatibility optimization.

# 2.4.1-alpha (2019-08-29)

### Perfect

- **capsuleChart:** Adaptive display unit.

# 2.4.0-alpha (2019-08-29)

### New

- **borderBox10**
- **capsuleChart**

# 2.3.9-alpha (2019-08-27)

### Perfect

- **percentPond:** Compatibility enhancement. 

# 2.3.8-alpha (2019-08-27)

### Bug Fixes

- **percentPond:** Style compatibility and gradient exceptions. 

# 2.3.7-alpha (2019-08-26)

### Bug Fixes

- **borderBox1:** Parent container setting `text-align: center` to cause display exception [(#6)](https://github.com/jiaming743/DataV/issues/6). 

# 2.3.6-alpha (2019-08-24)

### Bug Fixes

- **borderBox1:** Animation exception caused by incompatible syntax and spelling mistake [(#4)](https://github.com/jiaming743/DataV/issues/4)[(#5)](https://github.com/jiaming743/DataV/pull/5). 

### Perfect

- **svg:** Svg animation compatibility enhancement.

# 2.3.5-alpha (2019-08-22)

### Bug Fixes

- **activeRingChart:** Color configuration does not take effect [(#3)](https://github.com/jiaming743/DataV/pull/3). 

# 2.3.4-alpha (2019-08-15)

### Bug Fixes

- **package.json:** Import exception caused by incorrect entry path configuration.

# 2.3.3-alpha (2019-07-22)

### Bug Fixes

- **waterPondLevel:** Potential namespace conflict.
- **digitalFlop:** Potential namespace conflict.

# 2.3.2-alpha (2019-07-05)

### Perfect

- **decoration:** Explicitly set the SVG width and height to enhance stability.
- **Introduced on demand**

  ```js
  import { borderBox1 } from '@jiaminghi/data-view'

  Vue.use(borderBox1)
  ```

# 2.3.1-alpha (2019-07-04)

### Perfect

- **charts:** Enhanced style compatibility.
- **scrollBoard:** Enhanced style compatibility.
- **fullScreenContainer:** Fix potential rendering exceptions.
- **mixin:** Strengthen `autoResize` stability.

# 2.3.0-alpha (2019-07-04)

### Directory Structure Change

* **before**

  ```
  .
  ├── components
  │   ├── borderBox1
  │   │   └── index.vue
  │   ├── borderBox2
  │   │   └── index.vue
  │   ├── etc.
  │   └── index.js
  ├── mixins
  │   └── autoResize.js
  ├── util
  │   └── index.js
  │
  ├── index.js
  │
  ├── package.json // main: 'index.js'
  └── etc.
  ```

* **after**

  ```
  .
  ├── lib // After compilation
  │   ├── components
  │   │   ├── borderBox1
  │   │   |   ├── src
  │   │   |   |   ├── main.vue
  │   │   |   |   └── main.css
  │   │   |   └── index.js
  │   │   ├── etc.
  │   │   └── index.js
  │   ├── mixin
  │   │   └── autoResize.js
  │   ├── util
  │   │   └── index.js
  │   └── index.js
  │
  ├── publish // For pre-publish process
  │
  ├── src // For development environments
  │   ├── components
  │   │   ├── borderBox1
  │   │   |   ├── src
  │   │   |   |   └── main.vue
  │   │   |   └── index.js
  │   │   ├── etc.
  │   │   └── index.js
  │   ├── mixin
  │   │   └── autoResize.js
  │   ├── util
  │   │   └── index.js
  │   └── index.js
  │
  ├── package.json // main: '/lib/index.js'
  ├── publish.js
  └── etc.
  ```

- **Introduced on demand**

  ```js
  import borderBox1 from '@jiaminghi/data-view/lib/components/borderBox1'
  
  Vue.use(borderBox1)
  ```

# 2.2.0-alpha (2019-06-29)

### New

- **borderBox**
- **decoration**

# 2.1.1-alpha (2019-06-28)

### Bug Fixes

- **autoResize:** Exception caused by `autoResize` mixin.
- **charts:** `Legend` is blocked by slot and can't click.

# 2.1.0-alpha (2019-06-27)

### New

- **conicalColumnChart**
- **scrollRankingBoard**

# 2.0.0-alpha (2019-06-26)

### Perfect

- **SVG:** Refactoring **borderbox** and **decoration** components with SVG (Volume dropped to 6%).
- **charts:** New charting component that supports **animation**.
- **compatibility:** Better data compatibility.

### New

- **digitalFlop**
- **flylineChart**
- **borderBox**
- **decoration**

### Components

- **prefix:** Components add **dv** prefix to prevent conflicts.

```html
<!-- v 1.x.x -->
<decoration-1 />

<!-- v 2.x.x -->
<dv-decoration-1 />
```


================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2019-present, DataV-Team

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

================================================
FILE: README.md
================================================
[ENGLISH](./README_EN.md)

<p align="center">
  <img src="./icon.png">
</p>
<h1 align="center">DataV</h1>
<p align="center">
    <a href="https://github.com/DataV-Team/datav/blob/master/LICENSE">
      <img src="https://img.shields.io/github/license/DataV-Team/datav.svg" alt="LICENSE" />
    </a>
    <a href="https://www.npmjs.com/package/@jiaminghi/data-view">
      <img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
    </a>
</p>

## DataV是干什么的?

* DataV是一个基于**Vue**的数据可视化组件库（当然也有[React版本](https://github.com/DataV-Team/DataV-React)）
* 提供用于提升页面视觉效果的**SVG**边框和装饰
* 提供常用的**图表**如折线图等
* 飞线图/轮播表等其他组件

### npm安装

```shell
$ npm install @jiaminghi/data-view
```

### 使用

```js
import Vue from 'vue'
import DataV from '@jiaminghi/data-view'

Vue.use(DataV)

// 按需引入
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)
```

详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).

### UMD版

`UMD`版可直接使用`script`标签引入，`UMD`版文件位于项目`dist`目录下，引入后将自动把所有组件注册为**Vue全局组件**，引入`DataV`前请确保已引入`Vue`。

[UMD版使用示例](./umdExample.html)

### TODO

* **地图组件**
* **TS**重构组件库底层依赖

### 致谢

组件库的开发基于个人学习和兴趣，由于技术水平及经验的限制，组件尚有许多不完善之处，如有BUG可及时提交[issue](https://github.com/DataV-Team/DataV/issues/new?template=bug_report.md)或添加反馈群进行反馈，也欢迎提供指正和建议，感谢各位的支持。

### 反馈
![Feedback](./QQGroup.png)

### Demo

Demo页面使用了全屏组件，请F11全屏后查看。

* [施工养护综合数据](http://datav.jiaminghi.com/demo/construction-data/index.html)

![construction-data](./demoImg/construction-data.jpg)

* [机电运维管理台](http://datav.jiaminghi.com/demo/manage-desk/index.html)

![manage-desk](./demoImg/manage-desk.jpg)

* [机电设备电子档案](http://datav.jiaminghi.com/demo/electronic-file/index.html)

![electronic-file](./demoImg/electronic-file.jpg)


================================================
FILE: README_EN.md
================================================
[中文](./README.md)

<p align="center">
  <img src="./icon.png">
</p>
<h1 align="center">DataV</h1>
<p align="center">
    <a href="https://github.com/DataV-Team/datav/blob/master/LICENSE">
      <img src="https://img.shields.io/github/license/DataV-Team/datav.svg" alt="LICENSE" />
    </a>
    <a href="https://www.npmjs.com/package/@jiaminghi/data-view">
      <img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
    </a>
</p>

## What is DataV?

* DataV is a data **visualization** components library based on **Vue**（Of course there are also [React versions](https://github.com/DataV-Team/DataV-React)）.
* Provide cool **SVG** borders and decorations.
* Provide common **charts** such as line chart, etc..
* flying line chart, carousel table and etc.

### Install with npm

```shell
$ npm install @jiaminghi/data-view
```

### use

```js
import Vue from 'vue'
import DataV from '@jiaminghi/data-view'

Vue.use(DataV)

// Introduced on demand
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)
```

Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).

### UMD version

The `UMD` version can be directly imported using the `script` tag. The `UMD` version file is located in the project `dist` directory. After import, all components will be automatically registered as **Vue global components**. Be sure to introduce `Vue` before introducing `DataV`.

[UMD version usage example](./umdExample.html)

### React version

The reaction version is already under development, so stay tuned

### Questionnaire

React version of the component library and feedback[Questionnaire](https://www.wjx.cn/jq/45326197.aspx)

![问卷调查](./questionnaire.jpg)

### TODO

* **Map Component**
* Refactor underlying dependencies using **TS**.

### Acknowledgement

The development of the component library is based on personal learning and interest. Due to technical level and experience limitations, there are still many imperfections in the components. If there are errors, you can submit [issue](https://github.com/DataV-team/DataV/issues/new?template=bug_report.md) in time or add feedback groups for feedback. Welcome to provide corrections and suggestions. Thank you for your support.

### Feedback

![Feedback](./QQGroup.png)

### Demo

The Demo page uses the full-screen component, please view it after F11 full screen.

* [Construction Data](http://datav.jiaminghi.com/demo/construction-data/index.html)

![construction-data](./demoImg/construction-data.jpg)

* [Manage-Desk](http://datav.jiaminghi.com/demo/manage-desk/index.html)

![manage-desk](./demoImg/manage-desk.jpg)

* [Electronic-File](http://datav.jiaminghi.com/demo/electronic-file/index.html)

![electronic-file](./demoImg/electronic-file.jpg)

================================================
FILE: build/entry.js
================================================
import Vue from 'vue'
import datav from '../src/index'

Vue.use(datav)


================================================
FILE: build/index.js
================================================
const { copyDir, fileForEach, readFile, writeFile, unlinkDirFileByExtname, dirForEach } = require('@jiaminghi/fs')
const print = require('./plugin/print')
const path = require('path')
const exec = require('./plugin/exec')

const PACKAGE_SRC = './src'
const COMPILE_SRC = './lib'
const COMPONENTS_DIR = '/components'
const ENTRANCE = '/index.js'
const libName = 'datav'

async function start () {
  // Compile for NPM

  const copyPackage = await copyDir(PACKAGE_SRC, COMPILE_SRC)

  if (!copyPackage) {
    print.error('Exception in file copy!')

    return false
  }

  print.success('Complete file copy!')

  const abstract = await abstractLessFromVue()

  if (!abstract) {
    print.error('Exception in less file extraction!')

    return false
  }

  print.success('Complete less file extraction!')

  await compileLessToCss()

  print.success('Complete less compilation to css!')

  const unlink = await unlinkDirFileByExtname(COMPILE_SRC, ['.less'])

  if (!unlink) {
    print.error('Exception in less file deletion!')

    return false
  }

  print.success('Complete less file deletion!')

  const addImport = await addCssImport()

  if (!addImport) {
    print.error('Exception in adding css import statement!')

    return false
  }

  print.success('Finish adding css import statement!')

  const componentsExport = await addComponentsExport()

  if (!componentsExport) {
    print.error('Exception in adding components export statement!')

    return false
  }

  print.success('Finish adding components export statement!')

  // Compile for UMD version
  const rollupCompile = await exec(`rollup -c build/rollup.config.js`)

  if (!rollupCompile) {
    print.error('Exception in rollupCompile')

    return
  }

  print.tip('After rollupCompile')

  const terser = await exec(`rollup -c build/rollup.terser.config.js`)

  if (!terser) {
    print.error('Exception in terser')

    return
  }

  print.tip('After terser')

  print.yellow('-------------------------------------')
  print.success('     DataV Lib Compile Success!      ')
  print.yellow('-------------------------------------')

  return true
}

async function abstractLessFromVue () {
  let abstractSuccess = true

  await fileForEach(COMPILE_SRC, async src => {
    if (path.extname(src) !== '.vue') return

    let template = await readFile(src)

    let style = template.match(/<style[ \S\n\r]*/g)
    if (style) style = style[0]
    if (!style) return

    style = style.replace(/<style[ a-z="']*>(\n|\r)?|<\/style>/g, '')
    style = style.replace(/[\n\r]*$/, '')

    const styleSrc = src.replace('.vue', '.less')
    let write = await writeFile(styleSrc, style)

    if (!write) {
      print.error(styleSrc + ' write error!')

      abstractSuccess = false
    }

    template = template.replace(/<style[ \S\n\r]*/g, '')
    template = template.replace(/[\n\r]*$/, '')
    write = await writeFile(src, template)

    if (!write) {
      print.error(src + ' rewrite error!')

      abstractSuccess = false
    }
  })

  return abstractSuccess
}

async function compileLessToCss () {
  let compileSuccess = true

  await fileForEach(COMPILE_SRC, async src => {
    if (path.extname(src) !== '.less') return

    src = src.replace('./', '')

    const execString = `lessc ${src} ${src.replace('less', 'css')}`

    print.yellow(execString, {
      maxBuffer: 1024 ** 5
    })

    const compile = await exec(execString)

    if (!compile) {
      print.error(execString + ' Error!')

      compileSuccess = false
    }
  })

  return compileSuccess
}

async function addCssImport () {
  let importSuccess = true

  await fileForEach(COMPILE_SRC + COMPONENTS_DIR, async src => {
    if (path.extname(src) !== '.js') return

    let content = await readFile(src)

    if (content.search(/import[ \S]* from '[\S]*\.vue'/) === -1) return

    content = `import './src/main.css'\n` + content

    let write = await writeFile(src, content)

    if (!write) {
      print.error(src + ' write import error!')

      importSuccess = false
    }
  })

  return importSuccess
}

async function addComponentsExport () {
  const components = []

  await dirForEach(COMPILE_SRC + COMPONENTS_DIR, src => {
    components.push(src.split('/').slice(-1)[0])
  })

  const importString = components.reduce((all, current) => {
    return all + '\n' + `export { default as ${current} } from '.${COMPONENTS_DIR}/${current}/index'`
  }, '/**\n * EXPORT COMPONENTS\n */') + '\n'

  const targetSrc = COMPILE_SRC + ENTRANCE

  let content = await readFile(targetSrc)

  content = importString + content

  let write = await writeFile(targetSrc, content)

  return write
}

async function compileUMDVersion () {

}

start()


================================================
FILE: build/plugin/exec.js
================================================
const { exec } = require('child_process')

function doExec (execString, maxBuffer = 1024 ** 5) {
  return new Promise(resolve => {
    exec(execString, {
      maxBuffer
    }, err => {
      if (err) {
        console.error(err)

        resolve(false)
      } else {
        resolve(true)
      }
    })
  })
}

module.exports = doExec

================================================
FILE: build/plugin/print.js
================================================
const print = {
  log (info) {
    console.log(info)
  },
  warn (info) {
    console.log('\033[31;33m' + info + '\033[0m')
  },
  error (info) {
    console.log('\033[31;40m' + info + '\033[0m')
  },
  tip (info) {
    console.log('\033[40;32m' + info + '\033[0m')
  },
  success (info) {
    console.log('\033[42;30m' + info + '\033[0m')
  },
  yellow (info) {
    console.log('\033[31;33m' + info + '\033[0m')
  }
}

module.exports = print


================================================
FILE: build/rollup.config.js
================================================
import resolve from 'rollup-plugin-node-resolve'
import vue from 'rollup-plugin-vue'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'

export default {
  input: 'build/entry.js',
  output: {
    format: 'umd',
    file: 'dist/datav.map.vue.js',
    name: 'datav'
  },
  plugins: [
    resolve(),
    babel({
      exclude: 'node_modules/**'
    }),
    commonjs(),
    vue(),
  ],
  external: ['Vue']
}

================================================
FILE: build/rollup.terser.config.js
================================================
import resolve from 'rollup-plugin-node-resolve'
import vue from 'rollup-plugin-vue'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import { terser } from "rollup-plugin-terser"

export default {
  input: 'build/entry.js',
  output: {
    format: 'umd',
    file: 'dist/datav.min.vue.js',
    name: 'datav'
  },
  plugins: [
    resolve(),
    babel({
      exclude: 'node_modules/**'
    }),
    commonjs(),
    vue(),
    terser(),
  ],
  external: ['Vue']
}

================================================
FILE: deploy/index.js
================================================
const { fileForEach } = require('@jiaminghi/fs')
const Client = require('ftp')
const print = require('./plugin/print')
const { emptyDir, put } = require('./plugin/ftp')
const getNodeParams = require('./plugin/nodeParams')

let config = null

try {
  config = require('./config')
} catch (err) {
  void 0
}

const DIST_PATH = './dist/'
const FTP_PATH = './datav/'

const ftp = new Client()

ftp.on('ready', async foo => {
  print.tip('FTP connected!')

  const isEmpty = await emptyDir(ftp, FTP_PATH)

  if (!isEmpty) {
    print.error('Exception in emptyDir!')

    return false
  }

  let status = true

  await fileForEach(DIST_PATH, async src => {
    const destPath = FTP_PATH + src.split('/').slice(-1)[0]

    print.tip('Upload: ' + destPath)

    if (!await put(ftp, src, destPath)) {
      status = false
      
      print.error('Exception in upload ' + destPath)
    }
  })

  if (status) {
    print.yellow('-------------------------------------')
    print.success('    Automatic Deployment Success!    ')
    print.yellow('-------------------------------------')  
  }

  ftp.destroy()
})

ftp.on('greeting', foo => {
  print.tip('FTP greeting')
})
ftp.on('close', foo => {
  print.tip('FTP close')
})
ftp.on('end', foo => {
  print.tip('FTP end')
})
ftp.on('error', foo => {
  print.tip('FTP error')
})

const { host, user, pass } = config || getNodeParams()

if (!host || !user || !pass) {
  print.error('Upload Dist to FTP Missing Parameters!')

  return false
}

print.tip('Start Upload!')

ftp.connect({
  host,
  user,
  password: pass
})


================================================
FILE: deploy/plugin/ftp.js
================================================
async function getList (ftp, src) {
  return new Promise(resolve => {
    ftp.list(src, (err, list) => {
      if (err) {
        console.error(err)

        resolve(false)
      } else {
        resolve(list)
      }
    })
  })
}

async function rmDir (ftp, src, recusive = true) {
  return new Promise(resolve => {
    ftp.rmdir(src, recusive, err => {
      if (err) {
        console.error(err)

        resolve(false)
      } else {
        resolve(true)
      }
    })
  })
}

async function deleteFile (ftp, src) {
  return new Promise(resolve => {
    ftp.delete(src, err => {
      if (err) {
        console.error(err)

        resolve(false)
      } else {
        resolve(true)
      }
    })
  })
}

async function emptyDir (ftp, src, except = []) {
  const list = await getList(ftp, src)

  for (let i = 0, listNum = list.length; i < listNum; i++) {
    const { type, name } = list[i]

    if (type === 'd' && (name === '.' || name === '..')) continue
    if (except.find(n => n === name)) continue

    const fullSrc = `${src}${name}`

    if (type === 'd') {
      if (!await rmDir(ftp, fullSrc, true)) return false
    } else {
      if (!await deleteFile(ftp, fullSrc)) return false
    }
  }

  return true
}

async function put (ftp, src, dest) {
  return new Promise(resolve => {
    ftp.put(src, dest, err => {
      if (err) {
        console.error(err)

        resolve(false)
      } else {
        resolve(true)
      }
    })
  })
}

async function mkDir (ftp, src, recusive = true) {
  return new Promise(resolve => {
    ftp.mkdir(src, recusive, err => {
      if (err) {
        console.error(err)

        resolve(false)
      } else {
        resolve(true)
      }
    })
  })
}

module.exports = {
  put,
  rmDir,
  mkDir,
  getList,
  emptyDir,
  deleteFile
}

================================================
FILE: deploy/plugin/nodeParams.js
================================================
function getNodeParams () {
  const params = {}

  process.argv.slice(2).forEach(param => {
    param = param.split('=')

    params[param[0]] = param[1]
  })

  return params
}

module.exports = getNodeParams

================================================
FILE: deploy/plugin/print.js
================================================
const print = {
  log (info) {
    console.log(info)
  },
  warn (info) {
    console.log('\033[31;33m' + info + '\033[0m')
  },
  error (info) {
    console.log('\033[31;40m' + info + '\033[0m')
  },
  tip (info) {
    console.log('\033[40;32m' + info + '\033[0m')
  },
  success (info) {
    console.log('\033[42;30m' + info + '\033[0m')
  },
  yellow (info) {
    console.log('\033[31;33m' + info + '\033[0m')
  }
}

module.exports = print


================================================
FILE: dist/datav.map.vue.js
================================================
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('vue')) :
  typeof define === 'function' && define.amd ? define(['vue'], factory) :
  (global = global || self, factory(global.Vue));
}(this, (function (Vue) { 'use strict';

  Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;

  function randomExtend(minNum, maxNum) {
    if (arguments.length === 1) {
      return parseInt(Math.random() * minNum + 1, 10);
    } else {
      return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
    }
  }
  function debounce(delay, callback) {
    let lastTime;
    return function () {
      clearTimeout(lastTime);
      const [that, args] = [this, arguments];
      lastTime = setTimeout(() => {
        callback.apply(that, args);
      }, delay);
    };
  }
  function observerDomResize(dom, callback) {
    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    const observer = new MutationObserver(callback);
    observer.observe(dom, {
      attributes: true,
      attributeFilter: ['style'],
      attributeOldValue: true
    });
    return observer;
  }
  function getPointDistance(pointOne, pointTwo) {
    const minusX = Math.abs(pointOne[0] - pointTwo[0]);
    const minusY = Math.abs(pointOne[1] - pointTwo[1]);
    return Math.sqrt(minusX * minusX + minusY * minusY);
  }
  function uuid(hasHyphen) {
    return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
      const r = Math.random() * 16 | 0;
      const v = c == 'x' ? r : r & 0x3 | 0x8;
      return v.toString(16);
    });
  }

  var autoResize = {
    data() {
      return {
        dom: '',
        width: 0,
        height: 0,
        debounceInitWHFun: '',
        domObserver: ''
      };
    },

    methods: {
      async autoResizeMixinInit() {
        const {
          initWH,
          getDebounceInitWHFun,
          bindDomResizeCallback,
          afterAutoResizeMixinInit
        } = this;
        await initWH(false);
        getDebounceInitWHFun();
        bindDomResizeCallback();
        if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit();
      },

      initWH(resize = true) {
        const {
          $nextTick,
          $refs,
          ref,
          onResize
        } = this;
        return new Promise(resolve => {
          $nextTick(_ => {
            const dom = this.dom = $refs[ref];
            this.width = dom ? dom.clientWidth : 0;
            this.height = dom ? dom.clientHeight : 0;

            if (!dom) {
              console.warn('DataV: Failed to get dom node, component rendering may be abnormal!');
            } else if (!this.width || !this.height) {
              console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!');
            }

            if (typeof onResize === 'function' && resize) onResize();
            resolve();
          });
        });
      },

      getDebounceInitWHFun() {
        const {
          initWH
        } = this;
        this.debounceInitWHFun = debounce(100, initWH);
      },

      bindDomResizeCallback() {
        const {
          dom,
          debounceInitWHFun
        } = this;
        this.domObserver = observerDomResize(dom, debounceInitWHFun);
        window.addEventListener('resize', debounceInitWHFun);
      },

      unbindDomResizeCallback() {
        let {
          domObserver,
          debounceInitWHFun
        } = this;
        if (!domObserver) return;
        domObserver.disconnect();
        domObserver.takeRecords();
        domObserver = null;
        window.removeEventListener('resize', debounceInitWHFun);
      }

    },

    mounted() {
      const {
        autoResizeMixinInit
      } = this;
      autoResizeMixinInit();
    },

    beforeDestroy() {
      const {
        unbindDomResizeCallback
      } = this;
      unbindDomResizeCallback();
    }

  };

  //
  var script = {
    name: 'DvFullScreenContainer',
    mixins: [autoResize],

    data() {
      return {
        ref: 'full-screen-container',
        allWidth: 0,
        scale: 0,
        datavRoot: '',
        ready: false
      };
    },

    methods: {
      afterAutoResizeMixinInit() {
        const {
          initConfig,
          setAppScale
        } = this;
        initConfig();
        setAppScale();
        this.ready = true;
      },

      initConfig() {
        const {
          dom
        } = this;
        const {
          width,
          height
        } = screen;
        this.allWidth = width;
        dom.style.width = `${width}px`;
        dom.style.height = `${height}px`;
      },

      setAppScale() {
        const {
          allWidth,
          dom
        } = this;
        const currentWidth = document.body.clientWidth;
        dom.style.transform = `scale(${currentWidth / allWidth})`;
      },

      onResize() {
        const {
          setAppScale
        } = this;
        setAppScale();
      }

    }
  };

  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
      if (typeof shadowMode !== 'boolean') {
          createInjectorSSR = createInjector;
          createInjector = shadowMode;
          shadowMode = false;
      }
      // Vue.extend constructor export interop.
      const options = typeof script === 'function' ? script.options : script;
      // render functions
      if (template && template.render) {
          options.render = template.render;
          options.staticRenderFns = template.staticRenderFns;
          options._compiled = true;
          // functional template
          if (isFunctionalTemplate) {
              options.functional = true;
          }
      }
      // scopedId
      if (scopeId) {
          options._scopeId = scopeId;
      }
      let hook;
      if (moduleIdentifier) {
          // server build
          hook = function (context) {
              // 2.3 injection
              context =
                  context || // cached call
                      (this.$vnode && this.$vnode.ssrContext) || // stateful
                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
              // 2.2 with runInNewContext: true
              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
                  context = __VUE_SSR_CONTEXT__;
              }
              // inject component styles
              if (style) {
                  style.call(this, createInjectorSSR(context));
              }
              // register component module identifier for async chunk inference
              if (context && context._registeredComponents) {
                  context._registeredComponents.add(moduleIdentifier);
              }
          };
          // used by ssr in case component is cached and beforeCreate
          // never gets called
          options._ssrRegister = hook;
      }
      else if (style) {
          hook = shadowMode
              ? function (context) {
                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
              }
              : function (context) {
                  style.call(this, createInjector(context));
              };
      }
      if (hook) {
          if (options.functional) {
              // register for functional component in vue file
              const originalRender = options.render;
              options.render = function renderWithStyleInjection(h, context) {
                  hook.call(context);
                  return originalRender(h, context);
              };
          }
          else {
              // inject component registration as beforeCreate hook
              const existing = options.beforeCreate;
              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
          }
      }
      return script;
  }

  const isOldIE = typeof navigator !== 'undefined' &&
      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
  function createInjector(context) {
      return (id, style) => addStyle(id, style);
  }
  let HEAD;
  const styles = {};
  function addStyle(id, css) {
      const group = isOldIE ? css.media || 'default' : id;
      const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
      if (!style.ids.has(id)) {
          style.ids.add(id);
          let code = css.source;
          if (css.map) {
              // https://developer.chrome.com/devtools/docs/javascript-debugging
              // this makes source maps inside style tags work properly in Chrome
              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
              // http://stackoverflow.com/a/26603875
              code +=
                  '\n/*# sourceMappingURL=data:application/json;base64,' +
                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
                      ' */';
          }
          if (!style.element) {
              style.element = document.createElement('style');
              style.element.type = 'text/css';
              if (css.media)
                  style.element.setAttribute('media', css.media);
              if (HEAD === undefined) {
                  HEAD = document.head || document.getElementsByTagName('head')[0];
              }
              HEAD.appendChild(style.element);
          }
          if ('styleSheet' in style.element) {
              style.styles.push(code);
              style.element.styleSheet.cssText = style.styles
                  .filter(Boolean)
                  .join('\n');
          }
          else {
              const index = style.ids.size - 1;
              const textNode = document.createTextNode(code);
              const nodes = style.element.childNodes;
              if (nodes[index])
                  style.element.removeChild(nodes[index]);
              if (nodes.length)
                  style.element.insertBefore(textNode, nodes[index]);
              else
                  style.element.appendChild(textNode);
          }
      }
  }

  /* script */
  const __vue_script__ = script;

  /* template */
  var __vue_render__ = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c(
      "div",
      { ref: _vm.ref, attrs: { id: "dv-full-screen-container" } },
      [_vm.ready ? [_vm._t("default")] : _vm._e()],
      2
    )
  };
  var __vue_staticRenderFns__ = [];
  __vue_render__._withStripped = true;

    /* style */
    const __vue_inject_styles__ = function (inject) {
      if (!inject) return
      inject("data-v-2da16e2c_0", { source: "#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,0BAA0B;EAC1B,YAAY;AACd","file":"main.vue","sourcesContent":["#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__ = undefined;
    /* module identifier */
    const __vue_module_identifier__ = undefined;
    /* functional template */
    const __vue_is_functional_template__ = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__ = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
      __vue_inject_styles__,
      __vue_script__,
      __vue_scope_id__,
      __vue_is_functional_template__,
      __vue_module_identifier__,
      false,
      createInjector,
      undefined,
      undefined
    );

  function fullScreenContainer (Vue) {
    Vue.component(__vue_component__.name, __vue_component__);
  }

  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  var script$1 = {
    name: 'DvLoading'
  };

  /* script */
  const __vue_script__$1 = script$1;

  /* template */
  var __vue_render__$1 = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { staticClass: "dv-loading" }, [
      _c("svg", { attrs: { width: "50px", height: "50px" } }, [
        _c(
          "circle",
          {
            attrs: {
              cx: "25",
              cy: "25",
              r: "20",
              fill: "transparent",
              "stroke-width": "3",
              "stroke-dasharray": "31.415, 31.415",
              stroke: "#02bcfe",
              "stroke-linecap": "round"
            }
          },
          [
            _c("animateTransform", {
              attrs: {
                attributeName: "transform",
                type: "rotate",
                values: "0, 25 25;360, 25 25",
                dur: "1.5s",
                repeatCount: "indefinite"
              }
            }),
            _vm._v(" "),
            _c("animate", {
              attrs: {
                attributeName: "stroke",
                values: "#02bcfe;#3be6cb;#02bcfe",
                dur: "3s",
                repeatCount: "indefinite"
              }
            })
          ],
          1
        ),
        _vm._v(" "),
        _c(
          "circle",
          {
            attrs: {
              cx: "25",
              cy: "25",
              r: "10",
              fill: "transparent",
              "stroke-width": "3",
              "stroke-dasharray": "15.7, 15.7",
              stroke: "#3be6cb",
              "stroke-linecap": "round"
            }
          },
          [
            _c("animateTransform", {
              attrs: {
                attributeName: "transform",
                type: "rotate",
                values: "360, 25 25;0, 25 25",
                dur: "1.5s",
                repeatCount: "indefinite"
              }
            }),
            _vm._v(" "),
            _c("animate", {
              attrs: {
                attributeName: "stroke",
                values: "#3be6cb;#02bcfe;#3be6cb",
                dur: "3s",
                repeatCount: "indefinite"
              }
            })
          ],
          1
        )
      ]),
      _vm._v(" "),
      _c("div", { staticClass: "loading-tip" }, [_vm._t("default")], 2)
    ])
  };
  var __vue_staticRenderFns__$1 = [];
  __vue_render__$1._withStripped = true;

    /* style */
    const __vue_inject_styles__$1 = function (inject) {
      if (!inject) return
      inject("data-v-c8b3d976_0", { source: ".dv-loading {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.dv-loading .loading-tip {\n  font-size: 15px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,mBAAmB;AACrB;AACA;EACE,eAAe;AACjB","file":"main.vue","sourcesContent":[".dv-loading {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.dv-loading .loading-tip {\n  font-size: 15px;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$1 = undefined;
    /* module identifier */
    const __vue_module_identifier__$1 = undefined;
    /* functional template */
    const __vue_is_functional_template__$1 = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
      __vue_inject_styles__$1,
      __vue_script__$1,
      __vue_scope_id__$1,
      __vue_is_functional_template__$1,
      __vue_module_identifier__$1,
      false,
      createInjector,
      undefined,
      undefined
    );

  function loading (Vue) {
    Vue.component(__vue_component__$1.name, __vue_component__$1);
  }

  function unwrapExports (x) {
  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
  }

  function createCommonjsModule(fn, module) {
  	return module = { exports: {} }, fn(module, module.exports), module.exports;
  }

  var interopRequireDefault = createCommonjsModule(function (module) {
  function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
      "default": obj
    };
  }

  module.exports = _interopRequireDefault;
  });

  unwrapExports(interopRequireDefault);

  function _arrayLikeToArray(arr, len) {
    if (len == null || len > arr.length) len = arr.length;

    for (var i = 0, arr2 = new Array(len); i < len; i++) {
      arr2[i] = arr[i];
    }

    return arr2;
  }

  var arrayLikeToArray = _arrayLikeToArray;

  function _arrayWithoutHoles(arr) {
    if (Array.isArray(arr)) return arrayLikeToArray(arr);
  }

  var arrayWithoutHoles = _arrayWithoutHoles;

  function _iterableToArray(iter) {
    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
  }

  var iterableToArray = _iterableToArray;

  function _unsupportedIterableToArray(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return arrayLikeToArray(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(o);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
  }

  var unsupportedIterableToArray = _unsupportedIterableToArray;

  function _nonIterableSpread() {
    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  }

  var nonIterableSpread = _nonIterableSpread;

  function _toConsumableArray(arr) {
    return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
  }

  var toConsumableArray = _toConsumableArray;

  var _typeof_1 = createCommonjsModule(function (module) {
  function _typeof(obj) {
    "@babel/helpers - typeof";

    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
      module.exports = _typeof = function _typeof(obj) {
        return typeof obj;
      };
    } else {
      module.exports = _typeof = function _typeof(obj) {
        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
      };
    }

    return _typeof(obj);
  }

  module.exports = _typeof;
  });

  function _arrayWithHoles(arr) {
    if (Array.isArray(arr)) return arr;
  }

  var arrayWithHoles = _arrayWithHoles;

  function _iterableToArrayLimit(arr, i) {
    if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
    var _arr = [];
    var _n = true;
    var _d = false;
    var _e = undefined;

    try {
      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
        _arr.push(_s.value);

        if (i && _arr.length === i) break;
      }
    } catch (err) {
      _d = true;
      _e = err;
    } finally {
      try {
        if (!_n && _i["return"] != null) _i["return"]();
      } finally {
        if (_d) throw _e;
      }
    }

    return _arr;
  }

  var iterableToArrayLimit = _iterableToArrayLimit;

  function _nonIterableRest() {
    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  }

  var nonIterableRest = _nonIterableRest;

  function _slicedToArray(arr, i) {
    return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();
  }

  var slicedToArray = _slicedToArray;

  var util = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.deepClone = deepClone;
  exports.eliminateBlur = eliminateBlur;
  exports.checkPointIsInCircle = checkPointIsInCircle;
  exports.getTwoPointDistance = getTwoPointDistance;
  exports.checkPointIsInPolygon = checkPointIsInPolygon;
  exports.checkPointIsInSector = checkPointIsInSector;
  exports.checkPointIsNearPolyline = checkPointIsNearPolyline;
  exports.checkPointIsInRect = checkPointIsInRect;
  exports.getRotatePointPos = getRotatePointPos;
  exports.getScalePointPos = getScalePointPos;
  exports.getTranslatePointPos = getTranslatePointPos;
  exports.getDistanceBetweenPointAndLine = getDistanceBetweenPointAndLine;
  exports.getCircleRadianPoint = getCircleRadianPoint;
  exports.getRegularPolygonPoints = getRegularPolygonPoints;
  exports["default"] = void 0;

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _typeof2 = interopRequireDefault(_typeof_1);

  var abs = Math.abs,
      sqrt = Math.sqrt,
      sin = Math.sin,
      cos = Math.cos,
      max = Math.max,
      min = Math.min,
      PI = Math.PI;
  /**
   * @description Clone an object or array
   * @param {Object|Array} object Cloned object
   * @param {Boolean} recursion   Whether to use recursive cloning
   * @return {Object|Array} Clone object
   */

  function deepClone(object) {
    var recursion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    if (!object) return object;
    var parse = JSON.parse,
        stringify = JSON.stringify;
    if (!recursion) return parse(stringify(object));
    var clonedObj = object instanceof Array ? [] : {};

    if (object && (0, _typeof2["default"])(object) === 'object') {
      for (var key in object) {
        if (object.hasOwnProperty(key)) {
          if (object[key] && (0, _typeof2["default"])(object[key]) === 'object') {
            clonedObj[key] = deepClone(object[key], true);
          } else {
            clonedObj[key] = object[key];
          }
        }
      }
    }

    return clonedObj;
  }
  /**
   * @description Eliminate line blur due to 1px line width
   * @param {Array} points Line points
   * @return {Array} Line points after processed
   */


  function eliminateBlur(points) {
    return points.map(function (_ref) {
      var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
          x = _ref2[0],
          y = _ref2[1];

      return [parseInt(x) + 0.5, parseInt(y) + 0.5];
    });
  }
  /**
   * @description Check if the point is inside the circle
   * @param {Array} point Postion of point
   * @param {Number} rx   Circle x coordinate
   * @param {Number} ry   Circle y coordinate
   * @param {Number} r    Circle radius
   * @return {Boolean} Result of check
   */


  function checkPointIsInCircle(point, rx, ry, r) {
    return getTwoPointDistance(point, [rx, ry]) <= r;
  }
  /**
   * @description Get the distance between two points
   * @param {Array} point1 point1
   * @param {Array} point2 point2
   * @return {Number} Distance between two points
   */


  function getTwoPointDistance(_ref3, _ref4) {
    var _ref5 = (0, _slicedToArray2["default"])(_ref3, 2),
        xa = _ref5[0],
        ya = _ref5[1];

    var _ref6 = (0, _slicedToArray2["default"])(_ref4, 2),
        xb = _ref6[0],
        yb = _ref6[1];

    var minusX = abs(xa - xb);
    var minusY = abs(ya - yb);
    return sqrt(minusX * minusX + minusY * minusY);
  }
  /**
   * @description Check if the point is inside the polygon
   * @param {Array} point  Postion of point
   * @param {Array} points The points that makes up a polyline
   * @return {Boolean} Result of check
   */


  function checkPointIsInPolygon(point, polygon) {
    var counter = 0;

    var _point = (0, _slicedToArray2["default"])(point, 2),
        x = _point[0],
        y = _point[1];

    var pointNum = polygon.length;

    for (var i = 1, p1 = polygon[0]; i <= pointNum; i++) {
      var p2 = polygon[i % pointNum];

      if (x > min(p1[0], p2[0]) && x <= max(p1[0], p2[0])) {
        if (y <= max(p1[1], p2[1])) {
          if (p1[0] !== p2[0]) {
            var xinters = (x - p1[0]) * (p2[1] - p1[1]) / (p2[0] - p1[0]) + p1[1];

            if (p1[1] === p2[1] || y <= xinters) {
              counter++;
            }
          }
        }
      }

      p1 = p2;
    }

    return counter % 2 === 1;
  }
  /**
   * @description Check if the point is inside the sector
   * @param {Array} point       Postion of point
   * @param {Number} rx         Sector x coordinate
   * @param {Number} ry         Sector y coordinate
   * @param {Number} r          Sector radius
   * @param {Number} startAngle Sector start angle
   * @param {Number} endAngle   Sector end angle
   * @param {Boolean} clockWise Whether the sector angle is clockwise
   * @return {Boolean} Result of check
   */


  function checkPointIsInSector(point, rx, ry, r, startAngle, endAngle, clockWise) {
    if (!point) return false;
    if (getTwoPointDistance(point, [rx, ry]) > r) return false;

    if (!clockWise) {
      var _deepClone = deepClone([endAngle, startAngle]);

      var _deepClone2 = (0, _slicedToArray2["default"])(_deepClone, 2);

      startAngle = _deepClone2[0];
      endAngle = _deepClone2[1];
    }

    var reverseBE = startAngle > endAngle;

    if (reverseBE) {
      var _ref7 = [endAngle, startAngle];
      startAngle = _ref7[0];
      endAngle = _ref7[1];
    }

    var minus = endAngle - startAngle;
    if (minus >= PI * 2) return true;

    var _point2 = (0, _slicedToArray2["default"])(point, 2),
        x = _point2[0],
        y = _point2[1];

    var _getCircleRadianPoint = getCircleRadianPoint(rx, ry, r, startAngle),
        _getCircleRadianPoint2 = (0, _slicedToArray2["default"])(_getCircleRadianPoint, 2),
        bx = _getCircleRadianPoint2[0],
        by = _getCircleRadianPoint2[1];

    var _getCircleRadianPoint3 = getCircleRadianPoint(rx, ry, r, endAngle),
        _getCircleRadianPoint4 = (0, _slicedToArray2["default"])(_getCircleRadianPoint3, 2),
        ex = _getCircleRadianPoint4[0],
        ey = _getCircleRadianPoint4[1];

    var vPoint = [x - rx, y - ry];
    var vBArm = [bx - rx, by - ry];
    var vEArm = [ex - rx, ey - ry];
    var reverse = minus > PI;

    if (reverse) {
      var _deepClone3 = deepClone([vEArm, vBArm]);

      var _deepClone4 = (0, _slicedToArray2["default"])(_deepClone3, 2);

      vBArm = _deepClone4[0];
      vEArm = _deepClone4[1];
    }

    var inSector = isClockWise(vBArm, vPoint) && !isClockWise(vEArm, vPoint);
    if (reverse) inSector = !inSector;
    if (reverseBE) inSector = !inSector;
    return inSector;
  }
  /**
   * @description Determine if the point is in the clockwise direction of the vector
   * @param {Array} vArm   Vector
   * @param {Array} vPoint Point
   * @return {Boolean} Result of check
   */


  function isClockWise(vArm, vPoint) {
    var _vArm = (0, _slicedToArray2["default"])(vArm, 2),
        ax = _vArm[0],
        ay = _vArm[1];

    var _vPoint = (0, _slicedToArray2["default"])(vPoint, 2),
        px = _vPoint[0],
        py = _vPoint[1];

    return -ay * px + ax * py > 0;
  }
  /**
   * @description Check if the point is inside the polyline
   * @param {Array} point      Postion of point
   * @param {Array} polyline   The points that makes up a polyline
   * @param {Number} lineWidth Polyline linewidth
   * @return {Boolean} Result of check
   */


  function checkPointIsNearPolyline(point, polyline, lineWidth) {
    var halfLineWidth = lineWidth / 2;
    var moveUpPolyline = polyline.map(function (_ref8) {
      var _ref9 = (0, _slicedToArray2["default"])(_ref8, 2),
          x = _ref9[0],
          y = _ref9[1];

      return [x, y - halfLineWidth];
    });
    var moveDownPolyline = polyline.map(function (_ref10) {
      var _ref11 = (0, _slicedToArray2["default"])(_ref10, 2),
          x = _ref11[0],
          y = _ref11[1];

      return [x, y + halfLineWidth];
    });
    var polygon = [].concat((0, _toConsumableArray2["default"])(moveUpPolyline), (0, _toConsumableArray2["default"])(moveDownPolyline.reverse()));
    return checkPointIsInPolygon(point, polygon);
  }
  /**
   * @description Check if the point is inside the rect
   * @param {Array} point   Postion of point
   * @param {Number} x      Rect start x coordinate
   * @param {Number} y      Rect start y coordinate
   * @param {Number} width  Rect width
   * @param {Number} height Rect height
   * @return {Boolean} Result of check
   */


  function checkPointIsInRect(_ref12, x, y, width, height) {
    var _ref13 = (0, _slicedToArray2["default"])(_ref12, 2),
        px = _ref13[0],
        py = _ref13[1];

    if (px < x) return false;
    if (py < y) return false;
    if (px > x + width) return false;
    if (py > y + height) return false;
    return true;
  }
  /**
   * @description Get the coordinates of the rotated point
   * @param {Number} rotate Degree of rotation
   * @param {Array} point   Postion of point
   * @param {Array} origin  Rotation center
   * @param {Array} origin  Rotation center
   * @return {Number} Coordinates after rotation
   */


  function getRotatePointPos() {
    var rotate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
    var point = arguments.length > 1 ? arguments[1] : undefined;
    var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
    if (!point) return false;
    if (rotate % 360 === 0) return point;

    var _point3 = (0, _slicedToArray2["default"])(point, 2),
        x = _point3[0],
        y = _point3[1];

    var _origin = (0, _slicedToArray2["default"])(origin, 2),
        ox = _origin[0],
        oy = _origin[1];

    rotate *= PI / 180;
    return [(x - ox) * cos(rotate) - (y - oy) * sin(rotate) + ox, (x - ox) * sin(rotate) + (y - oy) * cos(rotate) + oy];
  }
  /**
   * @description Get the coordinates of the scaled point
   * @param {Array} scale  Scale factor
   * @param {Array} point  Postion of point
   * @param {Array} origin Scale center
   * @return {Number} Coordinates after scale
   */


  function getScalePointPos() {
    var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [1, 1];
    var point = arguments.length > 1 ? arguments[1] : undefined;
    var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
    if (!point) return false;
    if (scale === 1) return point;

    var _point4 = (0, _slicedToArray2["default"])(point, 2),
        x = _point4[0],
        y = _point4[1];

    var _origin2 = (0, _slicedToArray2["default"])(origin, 2),
        ox = _origin2[0],
        oy = _origin2[1];

    var _scale = (0, _slicedToArray2["default"])(scale, 2),
        xs = _scale[0],
        ys = _scale[1];

    var relativePosX = x - ox;
    var relativePosY = y - oy;
    return [relativePosX * xs + ox, relativePosY * ys + oy];
  }
  /**
   * @description Get the coordinates of the scaled point
   * @param {Array} translate Translation distance
   * @param {Array} point     Postion of point
   * @return {Number} Coordinates after translation
   */


  function getTranslatePointPos(translate, point) {
    if (!translate || !point) return false;

    var _point5 = (0, _slicedToArray2["default"])(point, 2),
        x = _point5[0],
        y = _point5[1];

    var _translate = (0, _slicedToArray2["default"])(translate, 2),
        tx = _translate[0],
        ty = _translate[1];

    return [x + tx, y + ty];
  }
  /**
   * @description Get the distance from the point to the line
   * @param {Array} point     Postion of point
   * @param {Array} lineBegin Line start position
   * @param {Array} lineEnd   Line end position
   * @return {Number} Distance between point and line
   */


  function getDistanceBetweenPointAndLine(point, lineBegin, lineEnd) {
    if (!point || !lineBegin || !lineEnd) return false;

    var _point6 = (0, _slicedToArray2["default"])(point, 2),
        x = _point6[0],
        y = _point6[1];

    var _lineBegin = (0, _slicedToArray2["default"])(lineBegin, 2),
        x1 = _lineBegin[0],
        y1 = _lineBegin[1];

    var _lineEnd = (0, _slicedToArray2["default"])(lineEnd, 2),
        x2 = _lineEnd[0],
        y2 = _lineEnd[1];

    var a = y2 - y1;
    var b = x1 - x2;
    var c = y1 * (x2 - x1) - x1 * (y2 - y1);
    var molecule = abs(a * x + b * y + c);
    var denominator = sqrt(a * a + b * b);
    return molecule / denominator;
  }
  /**
   * @description Get the coordinates of the specified radian on the circle
   * @param {Number} x      Circle x coordinate
   * @param {Number} y      Circle y coordinate
   * @param {Number} radius Circle radius
   * @param {Number} radian Specfied radian
   * @return {Array} Postion of point
   */


  function getCircleRadianPoint(x, y, radius, radian) {
    return [x + cos(radian) * radius, y + sin(radian) * radius];
  }
  /**
   * @description Get the points that make up a regular polygon
   * @param {Number} x     X coordinate of the polygon inscribed circle
   * @param {Number} y     Y coordinate of the polygon inscribed circle
   * @param {Number} r     Radius of the polygon inscribed circle
   * @param {Number} side  Side number
   * @param {Number} minus Radian offset
   * @return {Array} Points that make up a regular polygon
   */


  function getRegularPolygonPoints(rx, ry, r, side) {
    var minus = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : PI * -0.5;
    var radianGap = PI * 2 / side;
    var radians = new Array(side).fill('').map(function (t, i) {
      return i * radianGap + minus;
    });
    return radians.map(function (radian) {
      return getCircleRadianPoint(rx, ry, r, radian);
    });
  }

  var _default = {
    deepClone: deepClone,
    eliminateBlur: eliminateBlur,
    checkPointIsInCircle: checkPointIsInCircle,
    checkPointIsInPolygon: checkPointIsInPolygon,
    checkPointIsInSector: checkPointIsInSector,
    checkPointIsNearPolyline: checkPointIsNearPolyline,
    getTwoPointDistance: getTwoPointDistance,
    getRotatePointPos: getRotatePointPos,
    getScalePointPos: getScalePointPos,
    getTranslatePointPos: getTranslatePointPos,
    getCircleRadianPoint: getCircleRadianPoint,
    getRegularPolygonPoints: getRegularPolygonPoints,
    getDistanceBetweenPointAndLine: getDistanceBetweenPointAndLine
  };
  exports["default"] = _default;
  });

  unwrapExports(util);
  var util_1 = util.deepClone;
  var util_2 = util.eliminateBlur;
  var util_3 = util.checkPointIsInCircle;
  var util_4 = util.getTwoPointDistance;
  var util_5 = util.checkPointIsInPolygon;
  var util_6 = util.checkPointIsInSector;
  var util_7 = util.checkPointIsNearPolyline;
  var util_8 = util.checkPointIsInRect;
  var util_9 = util.getRotatePointPos;
  var util_10 = util.getScalePointPos;
  var util_11 = util.getTranslatePointPos;
  var util_12 = util.getDistanceBetweenPointAndLine;
  var util_13 = util.getCircleRadianPoint;
  var util_14 = util.getRegularPolygonPoints;

  var util$1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.filterNonNumber = filterNonNumber;
  exports.deepMerge = deepMerge;
  exports.mulAdd = mulAdd;
  exports.mergeSameStackData = mergeSameStackData;
  exports.getTwoPointDistance = getTwoPointDistance;
  exports.getLinearGradientColor = getLinearGradientColor;
  exports.getPolylineLength = getPolylineLength;
  exports.getPointToLineDistance = getPointToLineDistance;
  exports.initNeedSeries = initNeedSeries;
  exports.radianToAngle = radianToAngle;

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);

  var _typeof2 = interopRequireDefault(_typeof_1);



  function filterNonNumber(array) {
    return array.filter(function (n) {
      return typeof n === 'number';
    });
  }

  function deepMerge(target, merged) {
    for (var key in merged) {
      if (target[key] && (0, _typeof2["default"])(target[key]) === 'object') {
        deepMerge(target[key], merged[key]);
        continue;
      }

      if ((0, _typeof2["default"])(merged[key]) === 'object') {
        target[key] = (0, util.deepClone)(merged[key], true);
        continue;
      }

      target[key] = merged[key];
    }

    return target;
  }

  function mulAdd(nums) {
    nums = filterNonNumber(nums);
    return nums.reduce(function (all, num) {
      return all + num;
    }, 0);
  }

  function mergeSameStackData(item, series) {
    var stack = item.stack;
    if (!stack) return (0, _toConsumableArray2["default"])(item.data);
    var stacks = series.filter(function (_ref) {
      var s = _ref.stack;
      return s === stack;
    });
    var index = stacks.findIndex(function (_ref2) {
      var d = _ref2.data;
      return d === item.data;
    });
    var datas = stacks.splice(0, index + 1).map(function (_ref3) {
      var data = _ref3.data;
      return data;
    });
    var dataLength = datas[0].length;
    return new Array(dataLength).fill(0).map(function (foo, i) {
      return mulAdd(datas.map(function (d) {
        return d[i];
      }));
    });
  }

  function getTwoPointDistance(pointOne, pointTwo) {
    var minusX = Math.abs(pointOne[0] - pointTwo[0]);
    var minusY = Math.abs(pointOne[1] - pointTwo[1]);
    return Math.sqrt(minusX * minusX + minusY * minusY);
  }

  function getLinearGradientColor(ctx, begin, end, color) {
    if (!ctx || !begin || !end || !color.length) return;
    var colors = color;
    typeof colors === 'string' && (colors = [color, color]);
    var linearGradientColor = ctx.createLinearGradient.apply(ctx, (0, _toConsumableArray2["default"])(begin).concat((0, _toConsumableArray2["default"])(end)));
    var colorGap = 1 / (colors.length - 1);
    colors.forEach(function (c, i) {
      return linearGradientColor.addColorStop(colorGap * i, c);
    });
    return linearGradientColor;
  }

  function getPolylineLength(points) {
    var lineSegments = new Array(points.length - 1).fill(0).map(function (foo, i) {
      return [points[i], points[i + 1]];
    });
    var lengths = lineSegments.map(function (item) {
      return getTwoPointDistance.apply(void 0, (0, _toConsumableArray2["default"])(item));
    });
    return mulAdd(lengths);
  }

  function getPointToLineDistance(point, linePointOne, linePointTwo) {
    var a = getTwoPointDistance(point, linePointOne);
    var b = getTwoPointDistance(point, linePointTwo);
    var c = getTwoPointDistance(linePointOne, linePointTwo);
    return 0.5 * Math.sqrt((a + b + c) * (a + b - c) * (a + c - b) * (b + c - a)) / c;
  }

  function initNeedSeries(series, config, type) {
    series = series.filter(function (_ref4) {
      var st = _ref4.type;
      return st === type;
    });
    series = series.map(function (item) {
      return deepMerge((0, util.deepClone)(config, true), item);
    });
    return series.filter(function (_ref5) {
      var show = _ref5.show;
      return show;
    });
  }

  function radianToAngle(radian) {
    return radian / Math.PI * 180;
  }
  });

  unwrapExports(util$1);
  var util_1$1 = util$1.filterNonNumber;
  var util_2$1 = util$1.deepMerge;
  var util_3$1 = util$1.mulAdd;
  var util_4$1 = util$1.mergeSameStackData;
  var util_5$1 = util$1.getTwoPointDistance;
  var util_6$1 = util$1.getLinearGradientColor;
  var util_7$1 = util$1.getPolylineLength;
  var util_8$1 = util$1.getPointToLineDistance;
  var util_9$1 = util$1.initNeedSeries;
  var util_10$1 = util$1.radianToAngle;

  //
  var script$2 = {
    name: 'DvBorderBox1',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      backgroundColor: {
        type: String,
        default: 'transparent'
      }
    },

    data() {
      return {
        ref: 'border-box-1',
        border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
        defaultColor: ['#4fd2dd', '#235fa7'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$2 = script$2;

  /* template */
  var __vue_render__$2 = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c(
      "div",
      { ref: _vm.ref, staticClass: "dv-border-box-1" },
      [
        _c(
          "svg",
          {
            staticClass: "border",
            attrs: { width: _vm.width, height: _vm.height }
          },
          [
            _c("polygon", {
              attrs: {
                fill: _vm.backgroundColor,
                points:
                  "10, 27 10, " +
                  (_vm.height - 27) +
                  " 13, " +
                  (_vm.height - 24) +
                  " 13, " +
                  (_vm.height - 21) +
                  " 24, " +
                  (_vm.height - 11) +
                  "\n    38, " +
                  (_vm.height - 11) +
                  " 41, " +
                  (_vm.height - 8) +
                  " 73, " +
                  (_vm.height - 8) +
                  " 75, " +
                  (_vm.height - 10) +
                  " 81, " +
                  (_vm.height - 10) +
                  "\n    85, " +
                  (_vm.height - 6) +
                  " " +
                  (_vm.width - 85) +
                  ", " +
                  (_vm.height - 6) +
                  " " +
                  (_vm.width - 81) +
                  ", " +
                  (_vm.height - 10) +
                  " " +
                  (_vm.width - 75) +
                  ", " +
                  (_vm.height - 10) +
                  "\n    " +
                  (_vm.width - 73) +
                  ", " +
                  (_vm.height - 8) +
                  " " +
                  (_vm.width - 41) +
                  ", " +
                  (_vm.height - 8) +
                  " " +
                  (_vm.width - 38) +
                  ", " +
                  (_vm.height - 11) +
                  "\n    " +
                  (_vm.width - 24) +
                  ", " +
                  (_vm.height - 11) +
                  " " +
                  (_vm.width - 13) +
                  ", " +
                  (_vm.height - 21) +
                  " " +
                  (_vm.width - 13) +
                  ", " +
                  (_vm.height - 24) +
                  "\n    " +
                  (_vm.width - 10) +
                  ", " +
                  (_vm.height - 27) +
                  " " +
                  (_vm.width - 10) +
                  ", 27 " +
                  (_vm.width - 13) +
                  ", 25 " +
                  (_vm.width - 13) +
                  ", 21\n    " +
                  (_vm.width - 24) +
                  ", 11 " +
                  (_vm.width - 38) +
                  ", 11 " +
                  (_vm.width - 41) +
                  ", 8 " +
                  (_vm.width - 73) +
                  ", 8 " +
                  (_vm.width - 75) +
                  ", 10\n    " +
                  (_vm.width - 81) +
                  ", 10 " +
                  (_vm.width - 85) +
                  ", 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24"
              }
            })
          ]
        ),
        _vm._v(" "),
        _vm._l(_vm.border, function(item) {
          return _c(
            "svg",
            {
              key: item,
              class: item + " border",
              attrs: { width: "150px", height: "150px" }
            },
            [
              _c(
                "polygon",
                {
                  attrs: {
                    fill: _vm.mergedColor[0],
                    points:
                      "6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
                  }
                },
                [
                  _c("animate", {
                    attrs: {
                      attributeName: "fill",
                      values:
                        _vm.mergedColor[0] +
                        ";" +
                        _vm.mergedColor[1] +
                        ";" +
                        _vm.mergedColor[0],
                      dur: "0.5s",
                      begin: "0s",
                      repeatCount: "indefinite"
                    }
                  })
                ]
              ),
              _vm._v(" "),
              _c(
                "polygon",
                {
                  attrs: {
                    fill: _vm.mergedColor[1],
                    points:
                      "27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
                  }
                },
                [
                  _c("animate", {
                    attrs: {
                      attributeName: "fill",
                      values:
                        _vm.mergedColor[1] +
                        ";" +
                        _vm.mergedColor[0] +
                        ";" +
                        _vm.mergedColor[1],
                      dur: "0.5s",
                      begin: "0s",
                      repeatCount: "indefinite"
                    }
                  })
                ]
              ),
              _vm._v(" "),
              _c(
                "polygon",
                {
                  attrs: {
                    fill: _vm.mergedColor[0],
                    points:
                      "9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
                  }
                },
                [
                  _c("animate", {
                    attrs: {
                      attributeName: "fill",
                      values:
                        _vm.mergedColor[0] +
                        ";" +
                        _vm.mergedColor[1] +
                        ";transparent",
                      dur: "1s",
                      begin: "0s",
                      repeatCount: "indefinite"
                    }
                  })
                ]
              )
            ]
          )
        }),
        _vm._v(" "),
        _c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
      ],
      2
    )
  };
  var __vue_staticRenderFns__$2 = [];
  __vue_render__$2._withStripped = true;

    /* style */
    const __vue_inject_styles__$2 = function (inject) {
      if (!inject) return
      inject("data-v-5d85361d_0", { source: ".dv-border-box-1 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-1 .border {\n  position: absolute;\n  display: block;\n}\n.dv-border-box-1 .right-top {\n  right: 0px;\n  transform: rotateY(180deg);\n}\n.dv-border-box-1 .left-bottom {\n  bottom: 0px;\n  transform: rotateX(180deg);\n}\n.dv-border-box-1 .right-bottom {\n  right: 0px;\n  bottom: 0px;\n  transform: rotateX(180deg) rotateY(180deg);\n}\n.dv-border-box-1 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,cAAc;AAChB;AACA;EACE,UAAU;EACV,0BAA0B;AAC5B;AACA;EACE,WAAW;EACX,0BAA0B;AAC5B;AACA;EACE,UAAU;EACV,WAAW;EACX,0CAA0C;AAC5C;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-1 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-1 .border {\n  position: absolute;\n  display: block;\n}\n.dv-border-box-1 .right-top {\n  right: 0px;\n  transform: rotateY(180deg);\n}\n.dv-border-box-1 .left-bottom {\n  bottom: 0px;\n  transform: rotateX(180deg);\n}\n.dv-border-box-1 .right-bottom {\n  right: 0px;\n  bottom: 0px;\n  transform: rotateX(180deg) rotateY(180deg);\n}\n.dv-border-box-1 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$2 = undefined;
    /* module identifier */
    const __vue_module_identifier__$2 = undefined;
    /* functional template */
    const __vue_is_functional_template__$2 = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
      __vue_inject_styles__$2,
      __vue_script__$2,
      __vue_scope_id__$2,
      __vue_is_functional_template__$2,
      __vue_module_identifier__$2,
      false,
      createInjector,
      undefined,
      undefined
    );

  function borderBox1 (Vue) {
    Vue.component(__vue_component__$2.name, __vue_component__$2);
  }

  //
  var script$3 = {
    name: 'DvBorderBox2',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      backgroundColor: {
        type: String,
        default: 'transparent'
      }
    },

    data() {
      return {
        ref: 'border-box-2',
        defaultColor: ['#fff', 'rgba(255, 255, 255, 0.6)'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$3 = script$3;

  /* template */
  var __vue_render__$3 = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-2" }, [
      _c(
        "svg",
        {
          staticClass: "dv-border-svg-container",
          attrs: { width: _vm.width, height: _vm.height }
        },
        [
          _c("polygon", {
            attrs: {
              fill: _vm.backgroundColor,
              points:
                "\n      7, 7 " +
                (_vm.width - 7) +
                ", 7 " +
                (_vm.width - 7) +
                ", " +
                (_vm.height - 7) +
                " 7, " +
                (_vm.height - 7) +
                "\n    "
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              stroke: _vm.mergedColor[0],
              points:
                "2, 2 " +
                (_vm.width - 2) +
                " ,2 " +
                (_vm.width - 2) +
                ", " +
                (_vm.height - 2) +
                " 2, " +
                (_vm.height - 2) +
                " 2, 2"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              stroke: _vm.mergedColor[1],
              points:
                "6, 6 " +
                (_vm.width - 6) +
                ", 6 " +
                (_vm.width - 6) +
                ", " +
                (_vm.height - 6) +
                " 6, " +
                (_vm.height - 6) +
                " 6, 6"
            }
          }),
          _vm._v(" "),
          _c("circle", {
            attrs: { fill: _vm.mergedColor[0], cx: "11", cy: "11", r: "1" }
          }),
          _vm._v(" "),
          _c("circle", {
            attrs: {
              fill: _vm.mergedColor[0],
              cx: _vm.width - 11,
              cy: "11",
              r: "1"
            }
          }),
          _vm._v(" "),
          _c("circle", {
            attrs: {
              fill: _vm.mergedColor[0],
              cx: _vm.width - 11,
              cy: _vm.height - 11,
              r: "1"
            }
          }),
          _vm._v(" "),
          _c("circle", {
            attrs: {
              fill: _vm.mergedColor[0],
              cx: "11",
              cy: _vm.height - 11,
              r: "1"
            }
          })
        ]
      ),
      _vm._v(" "),
      _c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
    ])
  };
  var __vue_staticRenderFns__$3 = [];
  __vue_render__$3._withStripped = true;

    /* style */
    const __vue_inject_styles__$3 = function (inject) {
      if (!inject) return
      inject("data-v-d5c64680_0", { source: ".dv-border-box-2 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-2 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-2 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-2 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;EACV,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-2 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-2 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-2 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-2 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$3 = undefined;
    /* module identifier */
    const __vue_module_identifier__$3 = undefined;
    /* functional template */
    const __vue_is_functional_template__$3 = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
      __vue_inject_styles__$3,
      __vue_script__$3,
      __vue_scope_id__$3,
      __vue_is_functional_template__$3,
      __vue_module_identifier__$3,
      false,
      createInjector,
      undefined,
      undefined
    );

  function borderBox2 (Vue) {
    Vue.component(__vue_component__$3.name, __vue_component__$3);
  }

  //
  var script$4 = {
    name: 'DvBorderBox3',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      backgroundColor: {
        type: String,
        default: 'transparent'
      }
    },

    data() {
      return {
        ref: 'border-box-3',
        defaultColor: ['#2862b7', '#2862b7'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$4 = script$4;

  /* template */
  var __vue_render__$4 = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-3" }, [
      _c(
        "svg",
        {
          staticClass: "dv-border-svg-container",
          attrs: { width: _vm.width, height: _vm.height }
        },
        [
          _c("polygon", {
            attrs: {
              fill: _vm.backgroundColor,
              points:
                "\n      23, 23 " +
                (_vm.width - 24) +
                ", 23 " +
                (_vm.width - 24) +
                ", " +
                (_vm.height - 24) +
                " 23, " +
                (_vm.height - 24) +
                "\n    "
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb3-line1",
            attrs: {
              stroke: _vm.mergedColor[0],
              points:
                "4, 4 " +
                (_vm.width - 22) +
                " ,4 " +
                (_vm.width - 22) +
                ", " +
                (_vm.height - 22) +
                " 4, " +
                (_vm.height - 22) +
                " 4, 4"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb3-line2",
            attrs: {
              stroke: _vm.mergedColor[1],
              points:
                "10, 10 " +
                (_vm.width - 16) +
                ", 10 " +
                (_vm.width - 16) +
                ", " +
                (_vm.height - 16) +
                " 10, " +
                (_vm.height - 16) +
                " 10, 10"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb3-line2",
            attrs: {
              stroke: _vm.mergedColor[1],
              points:
                "16, 16 " +
                (_vm.width - 10) +
                ", 16 " +
                (_vm.width - 10) +
                ", " +
                (_vm.height - 10) +
                " 16, " +
                (_vm.height - 10) +
                " 16, 16"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb3-line2",
            attrs: {
              stroke: _vm.mergedColor[1],
              points:
                "22, 22 " +
                (_vm.width - 4) +
                ", 22 " +
                (_vm.width - 4) +
                ", " +
                (_vm.height - 4) +
                " 22, " +
                (_vm.height - 4) +
                " 22, 22"
            }
          })
        ]
      ),
      _vm._v(" "),
      _c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
    ])
  };
  var __vue_staticRenderFns__$4 = [];
  __vue_render__$4._withStripped = true;

    /* style */
    const __vue_inject_styles__$4 = function (inject) {
      if (!inject) return
      inject("data-v-8dbfb74c_0", { source: ".dv-border-box-3 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-3 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-3 .dv-border-svg-container > polyline {\n  fill: none;\n}\n.dv-border-box-3 .dv-bb3-line1 {\n  stroke-width: 3;\n}\n.dv-border-box-3 .dv-bb3-line2 {\n  stroke-width: 1;\n}\n.dv-border-box-3 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;AACZ;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-3 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-3 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-3 .dv-border-svg-container > polyline {\n  fill: none;\n}\n.dv-border-box-3 .dv-bb3-line1 {\n  stroke-width: 3;\n}\n.dv-border-box-3 .dv-bb3-line2 {\n  stroke-width: 1;\n}\n.dv-border-box-3 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$4 = undefined;
    /* module identifier */
    const __vue_module_identifier__$4 = undefined;
    /* functional template */
    const __vue_is_functional_template__$4 = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$4 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
      __vue_inject_styles__$4,
      __vue_script__$4,
      __vue_scope_id__$4,
      __vue_is_functional_template__$4,
      __vue_module_identifier__$4,
      false,
      createInjector,
      undefined,
      undefined
    );

  function borderBox3 (Vue) {
    Vue.component(__vue_component__$4.name, __vue_component__$4);
  }

  //
  var script$5 = {
    name: 'DvBorderBox4',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      reverse: {
        type: Boolean,
        default: false
      },
      backgroundColor: {
        type: String,
        default: 'transparent'
      }
    },

    data() {
      return {
        ref: 'border-box-4',
        defaultColor: ['red', 'rgba(0,0,255,0.8)'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$5 = script$5;

  /* template */
  var __vue_render__$5 = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-4" }, [
      _c(
        "svg",
        {
          class: "dv-border-svg-container " + (_vm.reverse && "dv-reverse"),
          attrs: { width: _vm.width, height: _vm.height }
        },
        [
          _c("polygon", {
            attrs: {
              fill: _vm.backgroundColor,
              points:
                "\n      " +
                (_vm.width - 15) +
                ", 22 170, 22 150, 7 40, 7 28, 21 32, 24\n      16, 42 16, " +
                (_vm.height - 32) +
                " 41, " +
                (_vm.height - 7) +
                " " +
                (_vm.width - 15) +
                ", " +
                (_vm.height - 7) +
                "\n    "
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb4-line-1",
            attrs: {
              stroke: _vm.mergedColor[0],
              points:
                "145, " +
                (_vm.height - 5) +
                " 40, " +
                (_vm.height - 5) +
                " 10, " +
                (_vm.height - 35) +
                "\n        10, 40 40, 5 150, 5 170, 20 " +
                (_vm.width - 15) +
                ", 20"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb4-line-2",
            attrs: {
              stroke: _vm.mergedColor[1],
              points:
                "245, " +
                (_vm.height - 1) +
                " 36, " +
                (_vm.height - 1) +
                " 14, " +
                (_vm.height - 23) +
                "\n        14, " +
                (_vm.height - 100)
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb4-line-3",
            attrs: {
              stroke: _vm.mergedColor[0],
              points: "7, " + (_vm.height - 40) + " 7, " + (_vm.height - 75)
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb4-line-4",
            attrs: { stroke: _vm.mergedColor[0], points: "28, 24 13, 41 13, 64" }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb4-line-5",
            attrs: { stroke: _vm.mergedColor[0], points: "5, 45 5, 140" }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb4-line-6",
            attrs: { stroke: _vm.mergedColor[1], points: "14, 75 14, 180" }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb4-line-7",
            attrs: {
              stroke: _vm.mergedColor[1],
              points: "55, 11 147, 11 167, 26 250, 26"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb4-line-8",
            attrs: { stroke: _vm.mergedColor[1], points: "158, 5 173, 16" }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb4-line-9",
            attrs: {
              stroke: _vm.mergedColor[0],
              points: "200, 17 " + (_vm.width - 10) + ", 17"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb4-line-10",
            attrs: {
              stroke: _vm.mergedColor[1],
              points: "385, 17 " + (_vm.width - 10) + ", 17"
            }
          })
        ]
      ),
      _vm._v(" "),
      _c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
    ])
  };
  var __vue_staticRenderFns__$5 = [];
  __vue_render__$5._withStripped = true;

    /* style */
    const __vue_inject_styles__$5 = function (inject) {
      if (!inject) return
      inject("data-v-229480d1_0", { source: ".dv-border-box-4 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-4 .dv-reverse {\n  transform: rotate(180deg);\n}\n.dv-border-box-4 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-4 .dv-border-svg-container > polyline {\n  fill: none;\n}\n.dv-border-box-4 .sw1 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .sw3 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-1 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-2 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-3 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-4 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-5 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-6 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-7 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-8 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-9 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n  stroke-dasharray: 100 250;\n}\n.dv-border-box-4 .dv-bb4-line-10 {\n  stroke-width: 1;\n  stroke-dasharray: 80 270;\n}\n.dv-border-box-4 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,yBAAyB;AAC3B;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;AACZ;AACA;EACE,eAAe;AACjB;AACA;EACE,iBAAiB;EACjB,qBAAqB;AACvB;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,iBAAiB;EACjB,qBAAqB;AACvB;AACA;EACE,iBAAiB;EACjB,qBAAqB;AACvB;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,iBAAiB;EACjB,qBAAqB;AACvB;AACA;EACE,iBAAiB;EACjB,qBAAqB;EACrB,yBAAyB;AAC3B;AACA;EACE,eAAe;EACf,wBAAwB;AAC1B;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-4 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-4 .dv-reverse {\n  transform: rotate(180deg);\n}\n.dv-border-box-4 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-4 .dv-border-svg-container > polyline {\n  fill: none;\n}\n.dv-border-box-4 .sw1 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .sw3 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-1 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-2 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-3 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-4 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-5 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-6 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-7 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-8 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-9 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n  stroke-dasharray: 100 250;\n}\n.dv-border-box-4 .dv-bb4-line-10 {\n  stroke-width: 1;\n  stroke-dasharray: 80 270;\n}\n.dv-border-box-4 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$5 = undefined;
    /* module identifier */
    const __vue_module_identifier__$5 = undefined;
    /* functional template */
    const __vue_is_functional_template__$5 = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$5 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
      __vue_inject_styles__$5,
      __vue_script__$5,
      __vue_scope_id__$5,
      __vue_is_functional_template__$5,
      __vue_module_identifier__$5,
      false,
      createInjector,
      undefined,
      undefined
    );

  function borderBox4 (Vue) {
    Vue.component(__vue_component__$5.name, __vue_component__$5);
  }

  //
  var script$6 = {
    name: 'DvBorderBox5',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      reverse: {
        type: Boolean,
        default: false
      },
      backgroundColor: {
        type: String,
        default: 'transparent'
      }
    },

    data() {
      return {
        ref: 'border-box-5',
        defaultColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$6 = script$6;

  /* template */
  var __vue_render__$6 = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-5" }, [
      _c(
        "svg",
        {
          class: "dv-border-svg-container  " + (_vm.reverse && "dv-reverse"),
          attrs: { width: _vm.width, height: _vm.height }
        },
        [
          _c("polygon", {
            attrs: {
              fill: _vm.backgroundColor,
              points:
                "\n      10, 22 " +
                (_vm.width - 22) +
                ", 22 " +
                (_vm.width - 22) +
                ", " +
                (_vm.height - 86) +
                " " +
                (_vm.width - 84) +
                ", " +
                (_vm.height - 24) +
                " 10, " +
                (_vm.height - 24) +
                "\n    "
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb5-line-1",
            attrs: {
              stroke: _vm.mergedColor[0],
              points:
                "8, 5 " +
                (_vm.width - 5) +
                ", 5 " +
                (_vm.width - 5) +
                ", " +
                (_vm.height - 100) +
                "\n        " +
                (_vm.width - 100) +
                ", " +
                (_vm.height - 5) +
                " 8, " +
                (_vm.height - 5) +
                " 8, 5"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb5-line-2",
            attrs: {
              stroke: _vm.mergedColor[1],
              points:
                "3, 5 " +
                (_vm.width - 20) +
                ", 5 " +
                (_vm.width - 20) +
                ", " +
                (_vm.height - 60) +
                "\n        " +
                (_vm.width - 74) +
                ", " +
                (_vm.height - 5) +
                " 3, " +
                (_vm.height - 5) +
                " 3, 5"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb5-line-3",
            attrs: {
              stroke: _vm.mergedColor[1],
              points: "50, 13 " + (_vm.width - 35) + ", 13"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb5-line-4",
            attrs: {
              stroke: _vm.mergedColor[1],
              points: "15, 20 " + (_vm.width - 35) + ", 20"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb5-line-5",
            attrs: {
              stroke: _vm.mergedColor[1],
              points:
                "15, " +
                (_vm.height - 20) +
                " " +
                (_vm.width - 110) +
                ", " +
                (_vm.height - 20)
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            staticClass: "dv-bb5-line-6",
            attrs: {
              stroke: _vm.mergedColor[1],
              points:
                "15, " +
                (_vm.height - 13) +
                " " +
                (_vm.width - 110) +
                ", " +
                (_vm.height - 13)
            }
          })
        ]
      ),
      _vm._v(" "),
      _c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
    ])
  };
  var __vue_staticRenderFns__$6 = [];
  __vue_render__$6._withStripped = true;

    /* style */
    const __vue_inject_styles__$6 = function (inject) {
      if (!inject) return
      inject("data-v-5e711d00_0", { source: ".dv-border-box-5 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-5 .dv-reverse {\n  transform: rotate(180deg);\n}\n.dv-border-box-5 .dv-border-svg-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-5 .dv-border-svg-container > polyline {\n  fill: none;\n}\n.dv-border-box-5 .dv-bb5-line-1,\n.dv-border-box-5 .dv-bb5-line-2 {\n  stroke-width: 1;\n}\n.dv-border-box-5 .dv-bb5-line-3,\n.dv-border-box-5 .dv-bb5-line-6 {\n  stroke-width: 5;\n}\n.dv-border-box-5 .dv-bb5-line-4,\n.dv-border-box-5 .dv-bb5-line-5 {\n  stroke-width: 2;\n}\n.dv-border-box-5 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,yBAAyB;AAC3B;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;AACd;AACA;EACE,UAAU;AACZ;AACA;;EAEE,eAAe;AACjB;AACA;;EAEE,eAAe;AACjB;AACA;;EAEE,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-5 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-5 .dv-reverse {\n  transform: rotate(180deg);\n}\n.dv-border-box-5 .dv-border-svg-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-5 .dv-border-svg-container > polyline {\n  fill: none;\n}\n.dv-border-box-5 .dv-bb5-line-1,\n.dv-border-box-5 .dv-bb5-line-2 {\n  stroke-width: 1;\n}\n.dv-border-box-5 .dv-bb5-line-3,\n.dv-border-box-5 .dv-bb5-line-6 {\n  stroke-width: 5;\n}\n.dv-border-box-5 .dv-bb5-line-4,\n.dv-border-box-5 .dv-bb5-line-5 {\n  stroke-width: 2;\n}\n.dv-border-box-5 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$6 = undefined;
    /* module identifier */
    const __vue_module_identifier__$6 = undefined;
    /* functional template */
    const __vue_is_functional_template__$6 = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$6 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
      __vue_inject_styles__$6,
      __vue_script__$6,
      __vue_scope_id__$6,
      __vue_is_functional_template__$6,
      __vue_module_identifier__$6,
      false,
      createInjector,
      undefined,
      undefined
    );

  function borderBox5 (Vue) {
    Vue.component(__vue_component__$6.name, __vue_component__$6);
  }

  //
  var script$7 = {
    name: 'DvBorderBox6',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      backgroundColor: {
        type: String,
        default: 'transparent'
      }
    },

    data() {
      return {
        ref: 'border-box-6',
        defaultColor: ['rgba(255, 255, 255, 0.35)', 'gray'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$7 = script$7;

  /* template */
  var __vue_render__$7 = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-6" }, [
      _c(
        "svg",
        {
          staticClass: "dv-border-svg-container",
          attrs: { width: _vm.width, height: _vm.height }
        },
        [
          _c("polygon", {
            attrs: {
              fill: _vm.backgroundColor,
              points:
                "\n      9, 7 " +
                (_vm.width - 9) +
                ", 7 " +
                (_vm.width - 9) +
                ", " +
                (_vm.height - 7) +
                " 9, " +
                (_vm.height - 7) +
                "\n    "
            }
          }),
          _vm._v(" "),
          _c("circle", {
            attrs: { fill: _vm.mergedColor[1], cx: "5", cy: "5", r: "2" }
          }),
          _vm._v(" "),
          _c("circle", {
            attrs: {
              fill: _vm.mergedColor[1],
              cx: _vm.width - 5,
              cy: "5",
              r: "2"
            }
          }),
          _vm._v(" "),
          _c("circle", {
            attrs: {
              fill: _vm.mergedColor[1],
              cx: _vm.width - 5,
              cy: _vm.height - 5,
              r: "2"
            }
          }),
          _vm._v(" "),
          _c("circle", {
            attrs: {
              fill: _vm.mergedColor[1],
              cx: "5",
              cy: _vm.height - 5,
              r: "2"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              stroke: _vm.mergedColor[0],
              points: "10, 4 " + (_vm.width - 10) + ", 4"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              stroke: _vm.mergedColor[0],
              points:
                "10, " +
                (_vm.height - 4) +
                " " +
                (_vm.width - 10) +
                ", " +
                (_vm.height - 4)
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              stroke: _vm.mergedColor[0],
              points: "5, 70 5, " + (_vm.height - 70)
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              stroke: _vm.mergedColor[0],
              points:
                _vm.width -
                5 +
                ", 70 " +
                (_vm.width - 5) +
                ", " +
                (_vm.height - 70)
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: { stroke: _vm.mergedColor[0], points: "3, 10, 3, 50" }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: { stroke: _vm.mergedColor[0], points: "7, 30 7, 80" }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              stroke: _vm.mergedColor[0],
              points: _vm.width - 3 + ", 10 " + (_vm.width - 3) + ", 50"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              stroke: _vm.mergedColor[0],
              points: _vm.width - 7 + ", 30 " + (_vm.width - 7) + ", 80"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              stroke: _vm.mergedColor[0],
              points: "3, " + (_vm.height - 10) + " 3, " + (_vm.height - 50)
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              stroke: _vm.mergedColor[0],
              points: "7, " + (_vm.height - 30) + " 7, " + (_vm.height - 80)
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              stroke: _vm.mergedColor[0],
              points:
                _vm.width -
                3 +
                ", " +
                (_vm.height - 10) +
                " " +
                (_vm.width - 3) +
                ", " +
                (_vm.height - 50)
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              stroke: _vm.mergedColor[0],
              points:
                _vm.width -
                7 +
                ", " +
                (_vm.height - 30) +
                " " +
                (_vm.width - 7) +
                ", " +
                (_vm.height - 80)
            }
          })
        ]
      ),
      _vm._v(" "),
      _c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
    ])
  };
  var __vue_staticRenderFns__$7 = [];
  __vue_render__$7._withStripped = true;

    /* style */
    const __vue_inject_styles__$7 = function (inject) {
      if (!inject) return
      inject("data-v-715598fc_0", { source: ".dv-border-box-6 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-6 .dv-border-svg-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-6 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-6 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;AACd;AACA;EACE,UAAU;EACV,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-6 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-6 .dv-border-svg-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-6 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-6 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$7 = undefined;
    /* module identifier */
    const __vue_module_identifier__$7 = undefined;
    /* functional template */
    const __vue_is_functional_template__$7 = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$7 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
      __vue_inject_styles__$7,
      __vue_script__$7,
      __vue_scope_id__$7,
      __vue_is_functional_template__$7,
      __vue_module_identifier__$7,
      false,
      createInjector,
      undefined,
      undefined
    );

  function borderBox6 (Vue) {
    Vue.component(__vue_component__$7.name, __vue_component__$7);
  }

  //
  var script$8 = {
    name: 'DvBorderBox7',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      backgroundColor: {
        type: String,
        default: 'transparent'
      }
    },

    data() {
      return {
        ref: 'border-box-7',
        defaultColor: ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$8 = script$8;

  /* template */
  var __vue_render__$8 = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c(
      "div",
      {
        ref: _vm.ref,
        staticClass: "dv-border-box-7",
        style:
          "box-shadow: inset 0 0 40px " +
          _vm.mergedColor[0] +
          "; border: 1px solid " +
          _vm.mergedColor[0] +
          "; background-color: " +
          _vm.backgroundColor
      },
      [
        _c(
          "svg",
          {
            staticClass: "dv-border-svg-container",
            attrs: { width: _vm.width, height: _vm.height }
          },
          [
            _c("polyline", {
              staticClass: "dv-bb7-line-width-2",
              attrs: { stroke: _vm.mergedColor[0], points: "0, 25 0, 0 25, 0" }
            }),
            _vm._v(" "),
            _c("polyline", {
              staticClass: "dv-bb7-line-width-2",
              attrs: {
                stroke: _vm.mergedColor[0],
                points:
                  _vm.width -
                  25 +
                  ", 0 " +
                  _vm.width +
                  ", 0 " +
                  _vm.width +
                  ", 25"
              }
            }),
            _vm._v(" "),
            _c("polyline", {
              staticClass: "dv-bb7-line-width-2",
              attrs: {
                stroke: _vm.mergedColor[0],
                points:
                  _vm.width -
                  25 +
                  ", " +
                  _vm.height +
                  " " +
                  _vm.width +
                  ", " +
                  _vm.height +
                  " " +
                  _vm.width +
                  ", " +
                  (_vm.height - 25)
              }
            }),
            _vm._v(" "),
            _c("polyline", {
              staticClass: "dv-bb7-line-width-2",
              attrs: {
                stroke: _vm.mergedColor[0],
                points:
                  "0, " +
                  (_vm.height - 25) +
                  " 0, " +
                  _vm.height +
                  " 25, " +
                  _vm.height
              }
            }),
            _vm._v(" "),
            _c("polyline", {
              staticClass: "dv-bb7-line-width-5",
              attrs: { stroke: _vm.mergedColor[1], points: "0, 10 0, 0 10, 0" }
            }),
            _vm._v(" "),
            _c("polyline", {
              staticClass: "dv-bb7-line-width-5",
              attrs: {
                stroke: _vm.mergedColor[1],
                points:
                  _vm.width -
                  10 +
                  ", 0 " +
                  _vm.width +
                  ", 0 " +
                  _vm.width +
                  ", 10"
              }
            }),
            _vm._v(" "),
            _c("polyline", {
              staticClass: "dv-bb7-line-width-5",
              attrs: {
                stroke: _vm.mergedColor[1],
                points:
                  _vm.width -
                  10 +
                  ", " +
                  _vm.height +
                  " " +
                  _vm.width +
                  ", " +
                  _vm.height +
                  " " +
                  _vm.width +
                  ", " +
                  (_vm.height - 10)
              }
            }),
            _vm._v(" "),
            _c("polyline", {
              staticClass: "dv-bb7-line-width-5",
              attrs: {
                stroke: _vm.mergedColor[1],
                points:
                  "0, " +
                  (_vm.height - 10) +
                  " 0, " +
                  _vm.height +
                  " 10, " +
                  _vm.height
              }
            })
          ]
        ),
        _vm._v(" "),
        _c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
      ]
    )
  };
  var __vue_staticRenderFns__$8 = [];
  __vue_render__$8._withStripped = true;

    /* style */
    const __vue_inject_styles__$8 = function (inject) {
      if (!inject) return
      inject("data-v-21156cd2_0", { source: ".dv-border-box-7 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-7 .dv-border-svg-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-7 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-linecap: round;\n}\n.dv-border-box-7 .dv-bb7-line-width-2 {\n  stroke-width: 2;\n}\n.dv-border-box-7 .dv-bb7-line-width-5 {\n  stroke-width: 5;\n}\n.dv-border-box-7 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;AACd;AACA;EACE,UAAU;EACV,qBAAqB;AACvB;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-7 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-7 .dv-border-svg-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-7 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-linecap: round;\n}\n.dv-border-box-7 .dv-bb7-line-width-2 {\n  stroke-width: 2;\n}\n.dv-border-box-7 .dv-bb7-line-width-5 {\n  stroke-width: 5;\n}\n.dv-border-box-7 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$8 = undefined;
    /* module identifier */
    const __vue_module_identifier__$8 = undefined;
    /* functional template */
    const __vue_is_functional_template__$8 = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$8 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
      __vue_inject_styles__$8,
      __vue_script__$8,
      __vue_scope_id__$8,
      __vue_is_functional_template__$8,
      __vue_module_identifier__$8,
      false,
      createInjector,
      undefined,
      undefined
    );

  function borderBox7 (Vue) {
    Vue.component(__vue_component__$8.name, __vue_component__$8);
  }

  //
  var script$9 = {
    name: 'DvBorderBox8',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      dur: {
        type: Number,
        default: 3
      },
      backgroundColor: {
        type: String,
        default: 'transparent'
      },
      reverse: {
        type: Boolean,
        default: false
      }
    },

    data() {
      const id = uuid();
      return {
        ref: 'border-box-8',
        path: `border-box-8-path-${id}`,
        gradient: `border-box-8-gradient-${id}`,
        mask: `border-box-8-mask-${id}`,
        defaultColor: ['#235fa7', '#4fd2dd'],
        mergedColor: []
      };
    },

    computed: {
      length() {
        const {
          width,
          height
        } = this;
        return (width + height - 5) * 2;
      },

      pathD() {
        const {
          reverse,
          width,
          height
        } = this;
        if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`;
        return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`;
      }

    },
    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$9 = script$9;

  /* template */
  var __vue_render__$9 = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-8" }, [
      _c(
        "svg",
        {
          staticClass: "dv-border-svg-container",
          attrs: { width: _vm.width, height: _vm.height }
        },
        [
          _c(
            "defs",
            [
              _c("path", {
                attrs: { id: _vm.path, d: _vm.pathD, fill: "transparent" }
              }),
              _vm._v(" "),
              _c(
                "radialGradient",
                { attrs: { id: _vm.gradient, cx: "50%", cy: "50%", r: "50%" } },
                [
                  _c("stop", {
                    attrs: {
                      offset: "0%",
                      "stop-color": "#fff",
                      "stop-opacity": "1"
                    }
                  }),
                  _vm._v(" "),
                  _c("stop", {
                    attrs: {
                      offset: "100%",
                      "stop-color": "#fff",
                      "stop-opacity": "0"
                    }
                  })
                ],
                1
              ),
              _vm._v(" "),
              _c("mask", { attrs: { id: _vm.mask } }, [
                _c(
                  "circle",
                  {
                    attrs: {
                      cx: "0",
                      cy: "0",
                      r: "150",
                      fill: "url(#" + _vm.gradient + ")"
                    }
                  },
                  [
                    _c("animateMotion", {
                      attrs: {
                        dur: _vm.dur + "s",
                        path: _vm.pathD,
                        rotate: "auto",
                        repeatCount: "indefinite"
                      }
                    })
                  ],
                  1
                )
              ])
            ],
            1
          ),
          _vm._v(" "),
          _c("polygon", {
            attrs: {
              fill: _vm.backgroundColor,
              points:
                "5, 5 " +
                (_vm.width - 5) +
                ", 5 " +
                (_vm.width - 5) +
                " " +
                (_vm.height - 5) +
                " 5, " +
                (_vm.height - 5)
            }
          }),
          _vm._v(" "),
          _c("use", {
            attrs: {
              stroke: _vm.mergedColor[0],
              "stroke-width": "1",
              "xlink:href": "#" + _vm.path
            }
          }),
          _vm._v(" "),
          _c(
            "use",
            {
              attrs: {
                stroke: _vm.mergedColor[1],
                "stroke-width": "3",
                "xlink:href": "#" + _vm.path,
                mask: "url(#" + _vm.mask + ")"
              }
            },
            [
              _c("animate", {
                attrs: {
                  attributeName: "stroke-dasharray",
                  from: "0, " + _vm.length,
                  to: _vm.length + ", 0",
                  dur: _vm.dur + "s",
                  repeatCount: "indefinite"
                }
              })
            ]
          )
        ]
      ),
      _vm._v(" "),
      _c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
    ])
  };
  var __vue_staticRenderFns__$9 = [];
  __vue_render__$9._withStripped = true;

    /* style */
    const __vue_inject_styles__$9 = function (inject) {
      if (!inject) return
      inject("data-v-681e49b5_0", { source: ".dv-border-box-8 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-8 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-8 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-8 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$9 = undefined;
    /* module identifier */
    const __vue_module_identifier__$9 = undefined;
    /* functional template */
    const __vue_is_functional_template__$9 = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$9 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
      __vue_inject_styles__$9,
      __vue_script__$9,
      __vue_scope_id__$9,
      __vue_is_functional_template__$9,
      __vue_module_identifier__$9,
      false,
      createInjector,
      undefined,
      undefined
    );

  function borderBox8 (Vue) {
    Vue.component(__vue_component__$9.name, __vue_component__$9);
  }

  //
  var script$a = {
    name: 'DvBorderBox9',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      backgroundColor: {
        type: String,
        default: 'transparent'
      }
    },

    data() {
      const id = uuid();
      return {
        ref: 'border-box-9',
        gradientId: `border-box-9-gradient-${id}`,
        maskId: `border-box-9-mask-${id}`,
        defaultColor: ['#11eefd', '#0078d2'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$a = script$a;

  /* template */
  var __vue_render__$a = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-9" }, [
      _c(
        "svg",
        {
          staticClass: "dv-border-svg-container",
          attrs: { width: _vm.width, height: _vm.height }
        },
        [
          _c(
            "defs",
            [
              _c(
                "linearGradient",
                {
                  attrs: {
                    id: _vm.gradientId,
                    x1: "0%",
                    y1: "0%",
                    x2: "100%",
                    y2: "100%"
                  }
                },
                [
                  _c("animate", {
                    attrs: {
                      attributeName: "x1",
                      values: "0%;100%;0%",
                      dur: "10s",
                      begin: "0s",
                      repeatCount: "indefinite"
                    }
                  }),
                  _vm._v(" "),
                  _c("animate", {
                    attrs: {
                      attributeName: "x2",
                      values: "100%;0%;100%",
                      dur: "10s",
                      begin: "0s",
                      repeatCount: "indefinite"
                    }
                  }),
                  _vm._v(" "),
                  _c(
                    "stop",
                    { attrs: { offset: "0%", "stop-color": _vm.mergedColor[0] } },
                    [
                      _c("animate", {
                        attrs: {
                          attributeName: "stop-color",
                          values:
                            _vm.mergedColor[0] +
                            ";" +
                            _vm.mergedColor[1] +
                            ";" +
                            _vm.mergedColor[0],
                          dur: "10s",
                          begin: "0s",
                          repeatCount: "indefinite"
                        }
                      })
                    ]
                  ),
                  _vm._v(" "),
                  _c(
                    "stop",
                    {
                      attrs: { offset: "100%", "stop-color": _vm.mergedColor[1] }
                    },
                    [
                      _c("animate", {
                        attrs: {
                          attributeName: "stop-color",
                          values:
                            _vm.mergedColor[1] +
                            ";" +
                            _vm.mergedColor[0] +
                            ";" +
                            _vm.mergedColor[1],
                          dur: "10s",
                          begin: "0s",
                          repeatCount: "indefinite"
                        }
                      })
                    ]
                  )
                ],
                1
              ),
              _vm._v(" "),
              _c("mask", { attrs: { id: _vm.maskId } }, [
                _c("polyline", {
                  attrs: {
                    stroke: "#fff",
                    "stroke-width": "3",
                    fill: "transparent",
                    points:
                      "8, " +
                      _vm.height * 0.4 +
                      " 8, 3, " +
                      (_vm.width * 0.4 + 7) +
                      ", 3"
                  }
                }),
                _vm._v(" "),
                _c("polyline", {
                  attrs: {
                    fill: "#fff",
                    points:
                      "8, " +
                      _vm.height * 0.15 +
                      " 8, 3, " +
                      (_vm.width * 0.1 + 7) +
                      ", 3\n            " +
                      _vm.width * 0.1 +
                      ", 8 14, 8 14, " +
                      (_vm.height * 0.15 - 7) +
                      "\n          "
                  }
                }),
                _vm._v(" "),
                _c("polyline", {
                  attrs: {
                    stroke: "#fff",
                    "stroke-width": "3",
                    fill: "transparent",
                    points:
                      _vm.width * 0.5 +
                      ", 3 " +
                      (_vm.width - 3) +
                      ", 3, " +
                      (_vm.width - 3) +
                      ", " +
                      _vm.height * 0.25
                  }
                }),
                _vm._v(" "),
                _c("polyline", {
                  attrs: {
                    fill: "#fff",
                    points:
                      "\n            " +
                      _vm.width * 0.52 +
                      ", 3 " +
                      _vm.width * 0.58 +
                      ", 3\n            " +
                      (_vm.width * 0.58 - 7) +
                      ", 9 " +
                      (_vm.width * 0.52 + 7) +
                      ", 9\n          "
                  }
                }),
                _vm._v(" "),
                _c("polyline", {
                  attrs: {
                    fill: "#fff",
                    points:
                      "\n            " +
                      _vm.width * 0.9 +
                      ", 3 " +
                      (_vm.width - 3) +
                      ", 3 " +
                      (_vm.width - 3) +
                      ", " +
                      _vm.height * 0.1 +
                      "\n            " +
                      (_vm.width - 9) +
                      ", " +
                      (_vm.height * 0.1 - 7) +
                      " " +
                      (_vm.width - 9) +
                      ", 9 " +
                      (_vm.width * 0.9 + 7) +
                      ", 9\n          "
                  }
                }),
                _vm._v(" "),
                _c("polyline", {
                  attrs: {
                    stroke: "#fff",
                    "stroke-width": "3",
                    fill: "transparent",
                    points:
                      "8, " +
                      _vm.height * 0.5 +
                      " 8, " +
                      (_vm.height - 3) +
                      " " +
                      (_vm.width * 0.3 + 7) +
                      ", " +
                      (_vm.height - 3)
                  }
                }),
                _vm._v(" "),
                _c("polyline", {
                  attrs: {
                    fill: "#fff",
                    points:
                      "\n            8, " +
                      _vm.height * 0.55 +
                      " 8, " +
                      _vm.height * 0.7 +
                      "\n            2, " +
                      (_vm.height * 0.7 - 7) +
                      " 2, " +
                      (_vm.height * 0.55 + 7) +
                      "\n          "
                  }
                }),
                _vm._v(" "),
                _c("polyline", {
                  attrs: {
                    stroke: "#fff",
                    "stroke-width": "3",
                    fill: "transparent",
                    points:
                      _vm.width * 0.35 +
                      ", " +
                      (_vm.height - 3) +
                      " " +
                      (_vm.width - 3) +
                      ", " +
                      (_vm.height - 3) +
                      " " +
                      (_vm.width - 3) +
                      ", " +
                      _vm.height * 0.35
                  }
                }),
                _vm._v(" "),
                _c("polyline", {
                  attrs: {
                    fill: "#fff",
                    points:
                      "\n            " +
                      _vm.width * 0.92 +
                      ", " +
                      (_vm.height - 3) +
                      " " +
                      (_vm.width - 3) +
                      ", " +
                      (_vm.height - 3) +
                      " " +
                      (_vm.width - 3) +
                      ", " +
                      _vm.height * 0.8 +
                      "\n            " +
                      (_vm.width - 9) +
                      ", " +
                      (_vm.height * 0.8 + 7) +
                      " " +
                      (_vm.width - 9) +
                      ", " +
                      (_vm.height - 9) +
                      " " +
                      (_vm.width * 0.92 + 7) +
                      ", " +
                      (_vm.height - 9) +
                      "\n          "
                  }
                })
              ])
            ],
            1
          ),
          _vm._v(" "),
          _c("polygon", {
            attrs: {
              fill: _vm.backgroundColor,
              points:
                "\n      15, 9 " +
                (_vm.width * 0.1 + 1) +
                ", 9 " +
                (_vm.width * 0.1 + 4) +
                ", 6 " +
                (_vm.width * 0.52 + 2) +
                ", 6\n      " +
                (_vm.width * 0.52 + 6) +
                ", 10 " +
                (_vm.width * 0.58 - 7) +
                ", 10 " +
                (_vm.width * 0.58 - 2) +
                ", 6\n      " +
                (_vm.width * 0.9 + 2) +
                ", 6 " +
                (_vm.width * 0.9 + 6) +
                ", 10 " +
                (_vm.width - 10) +
                ", 10 " +
                (_vm.width - 10) +
                ", " +
                (_vm.height * 0.1 - 6) +
                "\n      " +
                (_vm.width - 6) +
                ", " +
                (_vm.height * 0.1 - 1) +
                " " +
                (_vm.width - 6) +
                ", " +
                (_vm.height * 0.8 + 1) +
                " " +
                (_vm.width - 10) +
                ", " +
                (_vm.height * 0.8 + 6) +
                "\n      " +
                (_vm.width - 10) +
                ", " +
                (_vm.height - 10) +
                " " +
                (_vm.width * 0.92 + 7) +
                ", " +
                (_vm.height - 10) +
                "  " +
                (_vm.width * 0.92 + 2) +
                ", " +
                (_vm.height - 6) +
                "\n      11, " +
                (_vm.height - 6) +
                " 11, " +
                (_vm.height * 0.15 - 2) +
                " 15, " +
                (_vm.height * 0.15 - 7) +
                "\n    "
            }
          }),
          _vm._v(" "),
          _c("rect", {
            attrs: {
              x: "0",
              y: "0",
              width: _vm.width,
              height: _vm.height,
              fill: "url(#" + _vm.gradientId + ")",
              mask: "url(#" + _vm.maskId + ")"
            }
          })
        ]
      ),
      _vm._v(" "),
      _c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
    ])
  };
  var __vue_staticRenderFns__$a = [];
  __vue_render__$a._withStripped = true;

    /* style */
    const __vue_inject_styles__$a = function (inject) {
      if (!inject) return
      inject("data-v-db539808_0", { source: ".dv-border-box-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-9 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-9 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$a = undefined;
    /* module identifier */
    const __vue_module_identifier__$a = undefined;
    /* functional template */
    const __vue_is_functional_template__$a = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$a = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
      __vue_inject_styles__$a,
      __vue_script__$a,
      __vue_scope_id__$a,
      __vue_is_functional_template__$a,
      __vue_module_identifier__$a,
      false,
      createInjector,
      undefined,
      undefined
    );

  function borderBox9 (Vue) {
    Vue.component(__vue_component__$a.name, __vue_component__$a);
  }

  //
  var script$b = {
    name: 'DvBorderBox10',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      backgroundColor: {
        type: String,
        default: 'transparent'
      }
    },

    data() {
      return {
        ref: 'border-box-10',
        border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
        defaultColor: ['#1d48c4', '#d3e1f8'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$b = script$b;

  /* template */
  var __vue_render__$b = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c(
      "div",
      {
        ref: _vm.ref,
        staticClass: "dv-border-box-10",
        style: "box-shadow: inset 0 0 25px 3px " + _vm.mergedColor[0]
      },
      [
        _c(
          "svg",
          {
            staticClass: "dv-border-svg-container",
            attrs: { width: _vm.width, height: _vm.height }
          },
          [
            _c("polygon", {
              attrs: {
                fill: _vm.backgroundColor,
                points:
                  "\n      4, 0 " +
                  (_vm.width - 4) +
                  ", 0 " +
                  _vm.width +
                  ", 4 " +
                  _vm.width +
                  ", " +
                  (_vm.height - 4) +
                  " " +
                  (_vm.width - 4) +
                  ", " +
                  _vm.height +
                  "\n      4, " +
                  _vm.height +
                  " 0, " +
                  (_vm.height - 4) +
                  " 0, 4\n    "
              }
            })
          ]
        ),
        _vm._v(" "),
        _vm._l(_vm.border, function(item) {
          return _c(
            "svg",
            {
              key: item,
              class: item + " dv-border-svg-container",
              attrs: { width: "150px", height: "150px" }
            },
            [
              _c("polygon", {
                attrs: {
                  fill: _vm.mergedColor[1],
                  points: "40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
                }
              })
            ]
          )
        }),
        _vm._v(" "),
        _c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
      ],
      2
    )
  };
  var __vue_staticRenderFns__$b = [];
  __vue_render__$b._withStripped = true;

    /* style */
    const __vue_inject_styles__$b = function (inject) {
      if (!inject) return
      inject("data-v-746a9ff1_0", { source: ".dv-border-box-10 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: 6px;\n}\n.dv-border-box-10 .dv-border-svg-container {\n  position: absolute;\n  display: block;\n}\n.dv-border-box-10 .right-top {\n  right: 0px;\n  transform: rotateY(180deg);\n}\n.dv-border-box-10 .left-bottom {\n  bottom: 0px;\n  transform: rotateX(180deg);\n}\n.dv-border-box-10 .right-bottom {\n  right: 0px;\n  bottom: 0px;\n  transform: rotateX(180deg) rotateY(180deg);\n}\n.dv-border-box-10 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,cAAc;AAChB;AACA;EACE,UAAU;EACV,0BAA0B;AAC5B;AACA;EACE,WAAW;EACX,0BAA0B;AAC5B;AACA;EACE,UAAU;EACV,WAAW;EACX,0CAA0C;AAC5C;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-10 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: 6px;\n}\n.dv-border-box-10 .dv-border-svg-container {\n  position: absolute;\n  display: block;\n}\n.dv-border-box-10 .right-top {\n  right: 0px;\n  transform: rotateY(180deg);\n}\n.dv-border-box-10 .left-bottom {\n  bottom: 0px;\n  transform: rotateX(180deg);\n}\n.dv-border-box-10 .right-bottom {\n  right: 0px;\n  bottom: 0px;\n  transform: rotateX(180deg) rotateY(180deg);\n}\n.dv-border-box-10 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$b = undefined;
    /* module identifier */
    const __vue_module_identifier__$b = undefined;
    /* functional template */
    const __vue_is_functional_template__$b = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$b = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
      __vue_inject_styles__$b,
      __vue_script__$b,
      __vue_scope_id__$b,
      __vue_is_functional_template__$b,
      __vue_module_identifier__$b,
      false,
      createInjector,
      undefined,
      undefined
    );

  function borderBox10 (Vue) {
    Vue.component(__vue_component__$b.name, __vue_component__$b);
  }

  var keywords = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports["default"] = void 0;

  var _default = new Map([['transparent', 'rgba(0,0,0,0)'], ['black', '#000000'], ['silver', '#C0C0C0'], ['gray', '#808080'], ['white', '#FFFFFF'], ['maroon', '#800000'], ['red', '#FF0000'], ['purple', '#800080'], ['fuchsia', '#FF00FF'], ['green', '#008000'], ['lime', '#00FF00'], ['olive', '#808000'], ['yellow', '#FFFF00'], ['navy', '#000080'], ['blue', '#0000FF'], ['teal', '#008080'], ['aqua', '#00FFFF'], ['aliceblue', '#f0f8ff'], ['antiquewhite', '#faebd7'], ['aquamarine', '#7fffd4'], ['azure', '#f0ffff'], ['beige', '#f5f5dc'], ['bisque', '#ffe4c4'], ['blanchedalmond', '#ffebcd'], ['blueviolet', '#8a2be2'], ['brown', '#a52a2a'], ['burlywood', '#deb887'], ['cadetblue', '#5f9ea0'], ['chartreuse', '#7fff00'], ['chocolate', '#d2691e'], ['coral', '#ff7f50'], ['cornflowerblue', '#6495ed'], ['cornsilk', '#fff8dc'], ['crimson', '#dc143c'], ['cyan', '#00ffff'], ['darkblue', '#00008b'], ['darkcyan', '#008b8b'], ['darkgoldenrod', '#b8860b'], ['darkgray', '#a9a9a9'], ['darkgreen', '#006400'], ['darkgrey', '#a9a9a9'], ['darkkhaki', '#bdb76b'], ['darkmagenta', '#8b008b'], ['darkolivegreen', '#556b2f'], ['darkorange', '#ff8c00'], ['darkorchid', '#9932cc'], ['darkred', '#8b0000'], ['darksalmon', '#e9967a'], ['darkseagreen', '#8fbc8f'], ['darkslateblue', '#483d8b'], ['darkslategray', '#2f4f4f'], ['darkslategrey', '#2f4f4f'], ['darkturquoise', '#00ced1'], ['darkviolet', '#9400d3'], ['deeppink', '#ff1493'], ['deepskyblue', '#00bfff'], ['dimgray', '#696969'], ['dimgrey', '#696969'], ['dodgerblue', '#1e90ff'], ['firebrick', '#b22222'], ['floralwhite', '#fffaf0'], ['forestgreen', '#228b22'], ['gainsboro', '#dcdcdc'], ['ghostwhite', '#f8f8ff'], ['gold', '#ffd700'], ['goldenrod', '#daa520'], ['greenyellow', '#adff2f'], ['grey', '#808080'], ['honeydew', '#f0fff0'], ['hotpink', '#ff69b4'], ['indianred', '#cd5c5c'], ['indigo', '#4b0082'], ['ivory', '#fffff0'], ['khaki', '#f0e68c'], ['lavender', '#e6e6fa'], ['lavenderblush', '#fff0f5'], ['lawngreen', '#7cfc00'], ['lemonchiffon', '#fffacd'], ['lightblue', '#add8e6'], ['lightcoral', '#f08080'], ['lightcyan', '#e0ffff'], ['lightgoldenrodyellow', '#fafad2'], ['lightgray', '#d3d3d3'], ['lightgreen', '#90ee90'], ['lightgrey', '#d3d3d3'], ['lightpink', '#ffb6c1'], ['lightsalmon', '#ffa07a'], ['lightseagreen', '#20b2aa'], ['lightskyblue', '#87cefa'], ['lightslategray', '#778899'], ['lightslategrey', '#778899'], ['lightsteelblue', '#b0c4de'], ['lightyellow', '#ffffe0'], ['limegreen', '#32cd32'], ['linen', '#faf0e6'], ['magenta', '#ff00ff'], ['mediumaquamarine', '#66cdaa'], ['mediumblue', '#0000cd'], ['mediumorchid', '#ba55d3'], ['mediumpurple', '#9370db'], ['mediumseagreen', '#3cb371'], ['mediumslateblue', '#7b68ee'], ['mediumspringgreen', '#00fa9a'], ['mediumturquoise', '#48d1cc'], ['mediumvioletred', '#c71585'], ['midnightblue', '#191970'], ['mintcream', '#f5fffa'], ['mistyrose', '#ffe4e1'], ['moccasin', '#ffe4b5'], ['navajowhite', '#ffdead'], ['oldlace', '#fdf5e6'], ['olivedrab', '#6b8e23'], ['orange', '#ffa500'], ['orangered', '#ff4500'], ['orchid', '#da70d6'], ['palegoldenrod', '#eee8aa'], ['palegreen', '#98fb98'], ['paleturquoise', '#afeeee'], ['palevioletred', '#db7093'], ['papayawhip', '#ffefd5'], ['peachpuff', '#ffdab9'], ['peru', '#cd853f'], ['pink', '#ffc0cb'], ['plum', '#dda0dd'], ['powderblue', '#b0e0e6'], ['rosybrown', '#bc8f8f'], ['royalblue', '#4169e1'], ['saddlebrown', '#8b4513'], ['salmon', '#fa8072'], ['sandybrown', '#f4a460'], ['seagreen', '#2e8b57'], ['seashell', '#fff5ee'], ['sienna', '#a0522d'], ['skyblue', '#87ceeb'], ['slateblue', '#6a5acd'], ['slategray', '#708090'], ['slategrey', '#708090'], ['snow', '#fffafa'], ['springgreen', '#00ff7f'], ['steelblue', '#4682b4'], ['tan', '#d2b48c'], ['thistle', '#d8bfd8'], ['tomato', '#ff6347'], ['turquoise', '#40e0d0'], ['violet', '#ee82ee'], ['wheat', '#f5deb3'], ['whitesmoke', '#f5f5f5'], ['yellowgreen', '#9acd32']]);

  exports["default"] = _default;
  });

  unwrapExports(keywords);

  var lib = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.getRgbValue = getRgbValue;
  exports.getRgbaValue = getRgbaValue;
  exports.getOpacity = getOpacity;
  exports.toRgb = toRgb;
  exports.toHex = toHex;
  exports.getColorFromRgbValue = getColorFromRgbValue;
  exports.darken = darken;
  exports.lighten = lighten;
  exports.fade = fade;
  exports["default"] = void 0;

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);

  var _keywords = interopRequireDefault(keywords);

  var hexReg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  var rgbReg = /^(rgb|rgba|RGB|RGBA)/;
  var rgbaReg = /^(rgba|RGBA)/;
  /**
   * @description Color validator
   * @param {String} color Hex|Rgb|Rgba color or color keyword
   * @return {String|Boolean} Valid color Or false
   */

  function validator(color) {
    var isHex = hexReg.test(color);
    var isRgb = rgbReg.test(color);
    if (isHex || isRgb) return color;
    color = getColorByKeyword(color);

    if (!color) {
      console.error('Color: Invalid color!');
      return false;
    }

    return color;
  }
  /**
   * @description Get color by keyword
   * @param {String} keyword Color keyword like red, green and etc.
   * @return {String|Boolean} Hex or rgba color (Invalid keyword will return false)
   */


  function getColorByKeyword(keyword) {
    if (!keyword) {
      console.error('getColorByKeywords: Missing parameters!');
      return false;
    }

    if (!_keywords["default"].has(keyword)) return false;
    return _keywords["default"].get(keyword);
  }
  /**
   * @description Get the Rgb value of the color
   * @param {String} color Hex|Rgb|Rgba color or color keyword
   * @return {Array<Number>|Boolean} Rgb value of the color (Invalid input will return false)
   */


  function getRgbValue(color) {
    if (!color) {
      console.error('getRgbValue: Missing parameters!');
      return false;
    }

    color = validator(color);
    if (!color) return false;
    var isHex = hexReg.test(color);
    var isRgb = rgbReg.test(color);
    var lowerColor = color.toLowerCase();
    if (isHex) return getRgbValueFromHex(lowerColor);
    if (isRgb) return getRgbValueFromRgb(lowerColor);
  }
  /**
   * @description Get the rgb value of the hex color
   * @param {String} color Hex color
   * @return {Array<Number>} Rgb value of the color
   */


  function getRgbValueFromHex(color) {
    color = color.replace('#', '');
    if (color.length === 3) color = Array.from(color).map(function (hexNum) {
      return hexNum + hexNum;
    }).join('');
    color = color.split('');
    return new Array(3).fill(0).map(function (t, i) {
      return parseInt("0x".concat(color[i * 2]).concat(color[i * 2 + 1]));
    });
  }
  /**
   * @description Get the rgb value of the rgb/rgba color
   * @param {String} color Hex color
   * @return {Array} Rgb value of the color
   */


  function getRgbValueFromRgb(color) {
    return color.replace(/rgb\(|rgba\(|\)/g, '').split(',').slice(0, 3).map(function (n) {
      return parseInt(n);
    });
  }
  /**
   * @description Get the Rgba value of the color
   * @param {String} color Hex|Rgb|Rgba color or color keyword
   * @return {Array<Number>|Boolean} Rgba value of the color (Invalid input will return false)
   */


  function getRgbaValue(color) {
    if (!color) {
      console.error('getRgbaValue: Missing parameters!');
      return false;
    }

    var colorValue = getRgbValue(color);
    if (!colorValue) return false;
    colorValue.push(getOpacity(color));
    return colorValue;
  }
  /**
   * @description Get the opacity of color
   * @param {String} color Hex|Rgb|Rgba color or color keyword
   * @return {Number|Boolean} Color opacity (Invalid input will return false)
   */


  function getOpacity(color) {
    if (!color) {
      console.error('getOpacity: Missing parameters!');
      return false;
    }

    color = validator(color);
    if (!color) return false;
    var isRgba = rgbaReg.test(color);
    if (!isRgba) return 1;
    color = color.toLowerCase();
    return Number(color.split(',').slice(-1)[0].replace(/[)|\s]/g, ''));
  }
  /**
   * @description Convert color to Rgb|Rgba color
   * @param {String} color   Hex|Rgb|Rgba color or color keyword
   * @param {Number} opacity The opacity of color
   * @return {String|Boolean} Rgb|Rgba color (Invalid input will return false)
   */


  function toRgb(color, opacity) {
    if (!color) {
      console.error('toRgb: Missing parameters!');
      return false;
    }

    var rgbValue = getRgbValue(color);
    if (!rgbValue) return false;
    var addOpacity = typeof opacity === 'number';
    if (addOpacity) return 'rgba(' + rgbValue.join(',') + ",".concat(opacity, ")");
    return 'rgb(' + rgbValue.join(',') + ')';
  }
  /**
   * @description Convert color to Hex color
   * @param {String} color Hex|Rgb|Rgba color or color keyword
   * @return {String|Boolean} Hex color (Invalid input will return false)
   */


  function toHex(color) {
    if (!color) {
      console.error('toHex: Missing parameters!');
      return false;
    }

    if (hexReg.test(color)) return color;
    color = getRgbValue(color);
    if (!color) return false;
    return '#' + color.map(function (n) {
      return Number(n).toString(16);
    }).map(function (n) {
      return n === '0' ? '00' : n;
    }).join('');
  }
  /**
   * @description Get Color from Rgb|Rgba value
   * @param {Array<Number>} value Rgb|Rgba color value
   * @return {String|Boolean} Rgb|Rgba color (Invalid input will return false)
   */


  function getColorFromRgbValue(value) {
    if (!value) {
      console.error('getColorFromRgbValue: Missing parameters!');
      return false;
    }

    var valueLength = value.length;

    if (valueLength !== 3 && valueLength !== 4) {
      console.error('getColorFromRgbValue: Value is illegal!');
      return false;
    }

    var color = valueLength === 3 ? 'rgb(' : 'rgba(';
    color += value.join(',') + ')';
    return color;
  }
  /**
   * @description Deepen color
   * @param {String} color Hex|Rgb|Rgba color or color keyword
   * @return {Number} Percent of Deepen (1-100)
   * @return {String|Boolean} Rgba color (Invalid input will return false)
   */


  function darken(color) {
    var percent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    if (!color) {
      console.error('darken: Missing parameters!');
      return false;
    }

    var rgbaValue = getRgbaValue(color);
    if (!rgbaValue) return false;
    rgbaValue = rgbaValue.map(function (v, i) {
      return i === 3 ? v : v - Math.ceil(2.55 * percent);
    }).map(function (v) {
      return v < 0 ? 0 : v;
    });
    return getColorFromRgbValue(rgbaValue);
  }
  /**
   * @description Brighten color
   * @param {String} color Hex|Rgb|Rgba color or color keyword
   * @return {Number} Percent of brighten (1-100)
   * @return {String|Boolean} Rgba color (Invalid input will return false)
   */


  function lighten(color) {
    var percent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    if (!color) {
      console.error('lighten: Missing parameters!');
      return false;
    }

    var rgbaValue = getRgbaValue(color);
    if (!rgbaValue) return false;
    rgbaValue = rgbaValue.map(function (v, i) {
      return i === 3 ? v : v + Math.ceil(2.55 * percent);
    }).map(function (v) {
      return v > 255 ? 255 : v;
    });
    return getColorFromRgbValue(rgbaValue);
  }
  /**
   * @description Adjust color opacity
   * @param {String} color   Hex|Rgb|Rgba color or color keyword
   * @param {Number} Percent of opacity
   * @return {String|Boolean} Rgba color (Invalid input will return false)
   */


  function fade(color) {
    var percent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;

    if (!color) {
      console.error('fade: Missing parameters!');
      return false;
    }

    var rgbValue = getRgbValue(color);
    if (!rgbValue) return false;
    var rgbaValue = [].concat((0, _toConsumableArray2["default"])(rgbValue), [percent / 100]);
    return getColorFromRgbValue(rgbaValue);
  }

  var _default = {
    fade: fade,
    toHex: toHex,
    toRgb: toRgb,
    darken: darken,
    lighten: lighten,
    getOpacity: getOpacity,
    getRgbValue: getRgbValue,
    getRgbaValue: getRgbaValue,
    getColorFromRgbValue: getColorFromRgbValue
  };
  exports["default"] = _default;
  });

  unwrapExports(lib);
  var lib_1 = lib.getRgbValue;
  var lib_2 = lib.getRgbaValue;
  var lib_3 = lib.getOpacity;
  var lib_4 = lib.toRgb;
  var lib_5 = lib.toHex;
  var lib_6 = lib.getColorFromRgbValue;
  var lib_7 = lib.darken;
  var lib_8 = lib.lighten;
  var lib_9 = lib.fade;

  //
  var script$c = {
    name: 'DvBorderBox11',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      titleWidth: {
        type: Number,
        default: 250
      },
      title: {
        type: String,
        default: ''
      },
      backgroundColor: {
        type: String,
        default: 'transparent'
      }
    },

    data() {
      const id = uuid();
      return {
        ref: 'border-box-11',
        filterId: `border-box-11-filterId-${id}`,
        defaultColor: ['#8aaafb', '#1f33a2'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      },

      fade: lib_9
    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$c = script$c;

  /* template */
  var __vue_render__$c = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-11" }, [
      _c(
        "svg",
        {
          staticClass: "dv-border-svg-container",
          attrs: { width: _vm.width, height: _vm.height }
        },
        [
          _c("defs", [
            _c(
              "filter",
              {
                attrs: {
                  id: _vm.filterId,
                  height: "150%",
                  width: "150%",
                  x: "-25%",
                  y: "-25%"
                }
              },
              [
                _c("feMorphology", {
                  attrs: {
                    operator: "dilate",
                    radius: "2",
                    in: "SourceAlpha",
                    result: "thicken"
                  }
                }),
                _vm._v(" "),
                _c("feGaussianBlur", {
                  attrs: { in: "thicken", stdDeviation: "3", result: "blurred" }
                }),
                _vm._v(" "),
                _c("feFlood", {
                  attrs: {
                    "flood-color": _vm.mergedColor[1],
                    result: "glowColor"
                  }
                }),
                _vm._v(" "),
                _c("feComposite", {
                  attrs: {
                    in: "glowColor",
                    in2: "blurred",
                    operator: "in",
                    result: "softGlowColored"
                  }
                }),
                _vm._v(" "),
                _c(
                  "feMerge",
                  [
                    _c("feMergeNode", { attrs: { in: "softGlowColored" } }),
                    _vm._v(" "),
                    _c("feMergeNode", { attrs: { in: "SourceGraphic" } })
                  ],
                  1
                )
              ],
              1
            )
          ]),
          _vm._v(" "),
          _c("polygon", {
            attrs: {
              fill: _vm.backgroundColor,
              points:
                "\n      20, 32 " +
                (_vm.width * 0.5 - _vm.titleWidth / 2) +
                ", 32 " +
                (_vm.width * 0.5 - _vm.titleWidth / 2 + 20) +
                ", 53\n      " +
                (_vm.width * 0.5 + _vm.titleWidth / 2 - 20) +
                ", 53 " +
                (_vm.width * 0.5 + _vm.titleWidth / 2) +
                ", 32\n      " +
                (_vm.width - 20) +
                ", 32 " +
                (_vm.width - 8) +
                ", 48 " +
                (_vm.width - 8) +
                ", " +
                (_vm.height - 25) +
                " " +
                (_vm.width - 20) +
                ", " +
                (_vm.height - 8) +
                "\n      20, " +
                (_vm.height - 8) +
                " 8, " +
                (_vm.height - 25) +
                " 8, 50\n    "
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              stroke: _vm.mergedColor[0],
              filter: "url(#" + _vm.filterId + ")",
              points:
                "\n        " +
                (_vm.width - _vm.titleWidth) / 2 +
                ", 30\n        20, 30 7, 50 7, " +
                (50 + (_vm.height - 167) / 2) +
                "\n        13, " +
                (55 + (_vm.height - 167) / 2) +
                " 13, " +
                (135 + (_vm.height - 167) / 2) +
                "\n        7, " +
                (140 + (_vm.height - 167) / 2) +
                " 7, " +
                (_vm.height - 27) +
                "\n        20, " +
                (_vm.height - 7) +
                " " +
                (_vm.width - 20) +
                ", " +
                (_vm.height - 7) +
                " " +
                (_vm.width - 7) +
                ", " +
                (_vm.height - 27) +
                "\n        " +
                (_vm.width - 7) +
                ", " +
                (140 + (_vm.height - 167) / 2) +
                " " +
                (_vm.width - 13) +
                ", " +
                (135 + (_vm.height - 167) / 2) +
                "\n        " +
                (_vm.width - 13) +
                ", " +
                (55 + (_vm.height - 167) / 2) +
                " " +
                (_vm.width - 7) +
                ", " +
                (50 + (_vm.height - 167) / 2) +
                "\n        " +
                (_vm.width - 7) +
                ", 50 " +
                (_vm.width - 20) +
                ", 30 " +
                (_vm.width + _vm.titleWidth) / 2 +
                ", 30\n        " +
                ((_vm.width + _vm.titleWidth) / 2 - 20) +
                ", 7 " +
                ((_vm.width - _vm.titleWidth) / 2 + 20) +
                ", 7\n        " +
                (_vm.width - _vm.titleWidth) / 2 +
                ", 30 " +
                ((_vm.width - _vm.titleWidth) / 2 + 20) +
                ", 52\n        " +
                ((_vm.width + _vm.titleWidth) / 2 - 20) +
                ", 52 " +
                (_vm.width + _vm.titleWidth) / 2 +
                ", 30\n      "
            }
          }),
          _vm._v(" "),
          _c("polygon", {
            attrs: {
              stroke: _vm.mergedColor[0],
              fill: "transparent",
              points:
                "\n        " +
                ((_vm.width + _vm.titleWidth) / 2 - 5) +
                ", 30 " +
                ((_vm.width + _vm.titleWidth) / 2 - 21) +
                ", 11\n        " +
                ((_vm.width + _vm.titleWidth) / 2 - 27) +
                ", 11 " +
                ((_vm.width + _vm.titleWidth) / 2 - 8) +
                ", 34\n      "
            }
          }),
          _vm._v(" "),
          _c("polygon", {
            attrs: {
              stroke: _vm.mergedColor[0],
              fill: "transparent",
              points:
                "\n        " +
                ((_vm.width - _vm.titleWidth) / 2 + 5) +
                ", 30 " +
                ((_vm.width - _vm.titleWidth) / 2 + 22) +
                ", 49\n        " +
                ((_vm.width - _vm.titleWidth) / 2 + 28) +
                ", 49 " +
                ((_vm.width - _vm.titleWidth) / 2 + 8) +
                ", 26\n      "
            }
          }),
          _vm._v(" "),
          _c("polygon", {
            attrs: {
              stroke: _vm.mergedColor[0],
              fill: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 30),
              filter: "url(#" + _vm.filterId + ")",
              points:
                "\n        " +
                ((_vm.width + _vm.titleWidth) / 2 - 11) +
                ", 37 " +
                ((_vm.width + _vm.titleWidth) / 2 - 32) +
                ", 11\n        " +
                ((_vm.width - _vm.titleWidth) / 2 + 23) +
                ", 11 " +
                ((_vm.width - _vm.titleWidth) / 2 + 11) +
                ", 23\n        " +
                ((_vm.width - _vm.titleWidth) / 2 + 33) +
                ", 49 " +
                ((_vm.width + _vm.titleWidth) / 2 - 22) +
                ", 49\n      "
            }
          }),
          _vm._v(" "),
          _c(
            "polygon",
            {
              attrs: {
                filter: "url(#" + _vm.filterId + ")",
                fill: _vm.mergedColor[0],
                opacity: "1",
                points:
                  "\n        " +
                  ((_vm.width - _vm.titleWidth) / 2 - 10) +
                  ", 37 " +
                  ((_vm.width - _vm.titleWidth) / 2 - 31) +
                  ", 37\n        " +
                  ((_vm.width - _vm.titleWidth) / 2 - 25) +
                  ", 46 " +
                  ((_vm.width - _vm.titleWidth) / 2 - 4) +
                  ", 46\n      "
              }
            },
            [
              _c("animate", {
                attrs: {
                  attributeName: "opacity",
                  values: "1;0.7;1",
                  dur: "2s",
                  begin: "0s",
                  repeatCount: "indefinite"
                }
              })
            ]
          ),
          _vm._v(" "),
          _c(
            "polygon",
            {
              attrs: {
                filter: "url(#" + _vm.filterId + ")",
                fill: _vm.mergedColor[0],
                opacity: "0.7",
                points:
                  "\n        " +
                  ((_vm.width - _vm.titleWidth) / 2 - 40) +
                  ", 37 " +
                  ((_vm.width - _vm.titleWidth) / 2 - 61) +
                  ", 37\n        " +
                  ((_vm.width - _vm.titleWidth) / 2 - 55) +
                  ", 46 " +
                  ((_vm.width - _vm.titleWidth) / 2 - 34) +
                  ", 46\n      "
              }
            },
            [
              _c("animate", {
                attrs: {
                  attributeName: "opacity",
                  values: "0.7;0.4;0.7",
                  dur: "2s",
                  begin: "0s",
                  repeatCount: "indefinite"
                }
              })
            ]
          ),
          _vm._v(" "),
          _c(
            "polygon",
            {
              attrs: {
                filter: "url(#" + _vm.filterId + ")",
                fill: _vm.mergedColor[0],
                opacity: "0.5",
                points:
                  "\n        " +
                  ((_vm.width - _vm.titleWidth) / 2 - 70) +
                  ", 37 " +
                  ((_vm.width - _vm.titleWidth) / 2 - 91) +
                  ", 37\n        " +
                  ((_vm.width - _vm.titleWidth) / 2 - 85) +
                  ", 46 " +
                  ((_vm.width - _vm.titleWidth) / 2 - 64) +
                  ", 46\n      "
              }
            },
            [
              _c("animate", {
                attrs: {
                  attributeName: "opacity",
                  values: "0.5;0.2;0.5",
                  dur: "2s",
                  begin: "0s",
                  repeatCount: "indefinite"
                }
              })
            ]
          ),
          _vm._v(" "),
          _c(
            "polygon",
            {
              attrs: {
                filter: "url(#" + _vm.filterId + ")",
                fill: _vm.mergedColor[0],
                opacity: "1",
                points:
                  "\n        " +
                  ((_vm.width + _vm.titleWidth) / 2 + 30) +
                  ", 37 " +
                  ((_vm.width + _vm.titleWidth) / 2 + 9) +
                  ", 37\n        " +
                  ((_vm.width + _vm.titleWidth) / 2 + 3) +
                  ", 46 " +
                  ((_vm.width + _vm.titleWidth) / 2 + 24) +
                  ", 46\n      "
              }
            },
            [
              _c("animate", {
                attrs: {
                  attributeName: "opacity",
                  values: "1;0.7;1",
                  dur: "2s",
                  begin: "0s",
                  repeatCount: "indefinite"
                }
              })
            ]
          ),
          _vm._v(" "),
          _c(
            "polygon",
            {
              attrs: {
                filter: "url(#" + _vm.filterId + ")",
                fill: _vm.mergedColor[0],
                opacity: "0.7",
                points:
                  "\n        " +
                  ((_vm.width + _vm.titleWidth) / 2 + 60) +
                  ", 37 " +
                  ((_vm.width + _vm.titleWidth) / 2 + 39) +
                  ", 37\n        " +
                  ((_vm.width + _vm.titleWidth) / 2 + 33) +
                  ", 46 " +
                  ((_vm.width + _vm.titleWidth) / 2 + 54) +
                  ", 46\n      "
              }
            },
            [
              _c("animate", {
                attrs: {
                  attributeName: "opacity",
                  values: "0.7;0.4;0.7",
                  dur: "2s",
                  begin: "0s",
                  repeatCount: "indefinite"
                }
              })
            ]
          ),
          _vm._v(" "),
          _c(
            "polygon",
            {
              attrs: {
                filter: "url(#" + _vm.filterId + ")",
                fill: _vm.mergedColor[0],
                opacity: "0.5",
                points:
                  "\n        " +
                  ((_vm.width + _vm.titleWidth) / 2 + 90) +
                  ", 37 " +
                  ((_vm.width + _vm.titleWidth) / 2 + 69) +
                  ", 37\n        " +
                  ((_vm.width + _vm.titleWidth) / 2 + 63) +
                  ", 46 " +
                  ((_vm.width + _vm.titleWidth) / 2 + 84) +
                  ", 46\n      "
              }
            },
            [
              _c("animate", {
                attrs: {
                  attributeName: "opacity",
                  values: "0.5;0.2;0.5",
                  dur: "2s",
                  begin: "0s",
                  repeatCount: "indefinite"
                }
              })
            ]
          ),
          _vm._v(" "),
          _c(
            "text",
            {
              staticClass: "dv-border-box-11-title",
              attrs: {
                x: "" + _vm.width / 2,
                y: "32",
                fill: "#fff",
                "font-size": "18",
                "text-anchor": "middle",
                "dominant-baseline": "middle"
              }
            },
            [_vm._v("\n      " + _vm._s(_vm.title) + "\n    ")]
          ),
          _vm._v(" "),
          _c("polygon", {
            attrs: {
              fill: _vm.mergedColor[0],
              filter: "url(#" + _vm.filterId + ")",
              points:
                "\n        7, " +
                (53 + (_vm.height - 167) / 2) +
                " 11, " +
                (57 + (_vm.height - 167) / 2) +
                "\n        11, " +
                (133 + (_vm.height - 167) / 2) +
                " 7, " +
                (137 + (_vm.height - 167) / 2) +
                "\n      "
            }
          }),
          _vm._v(" "),
          _c("polygon", {
            attrs: {
              fill: _vm.mergedColor[0],
              filter: "url(#" + _vm.filterId + ")",
              points:
                "\n        " +
                (_vm.width - 7) +
                ", " +
                (53 + (_vm.height - 167) / 2) +
                " " +
                (_vm.width - 11) +
                ", " +
                (57 + (_vm.height - 167) / 2) +
                "\n        " +
                (_vm.width - 11) +
                ", " +
                (133 + (_vm.height - 167) / 2) +
                " " +
                (_vm.width - 7) +
                ", " +
                (137 + (_vm.height - 167) / 2) +
                "\n      "
            }
          })
        ]
      ),
      _vm._v(" "),
      _c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
    ])
  };
  var __vue_staticRenderFns__$c = [];
  __vue_render__$c._withStripped = true;

    /* style */
    const __vue_inject_styles__$c = function (inject) {
      if (!inject) return
      inject("data-v-10f995ec_0", { source: ".dv-border-box-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;EACV,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$c = undefined;
    /* module identifier */
    const __vue_module_identifier__$c = undefined;
    /* functional template */
    const __vue_is_functional_template__$c = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$c = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
      __vue_inject_styles__$c,
      __vue_script__$c,
      __vue_scope_id__$c,
      __vue_is_functional_template__$c,
      __vue_module_identifier__$c,
      false,
      createInjector,
      undefined,
      undefined
    );

  function borderBox11 (Vue) {
    Vue.component(__vue_component__$c.name, __vue_component__$c);
  }

  //
  var script$d = {
    name: 'DvBorderBox12',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      backgroundColor: {
        type: String,
        default: 'transparent'
      }
    },

    data() {
      const id = uuid();
      return {
        ref: 'border-box-12',
        filterId: `borderr-box-12-filterId-${id}`,
        defaultColor: ['#2e6099', '#7ce7fd'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      },

      fade: lib_9
    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$d = script$d;

  /* template */
  var __vue_render__$d = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-12" }, [
      _c(
        "svg",
        {
          staticClass: "dv-border-svg-container",
          attrs: { width: _vm.width, height: _vm.height }
        },
        [
          _c("defs", [
            _c(
              "filter",
              {
                attrs: {
                  id: _vm.filterId,
                  height: "150%",
                  width: "150%",
                  x: "-25%",
                  y: "-25%"
                }
              },
              [
                _c("feMorphology", {
                  attrs: {
                    operator: "dilate",
                    radius: "1",
                    in: "SourceAlpha",
                    result: "thicken"
                  }
                }),
                _vm._v(" "),
                _c("feGaussianBlur", {
                  attrs: { in: "thicken", stdDeviation: "2", result: "blurred" }
                }),
                _vm._v(" "),
                _c(
                  "feFlood",
                  {
                    attrs: {
                      "flood-color": _vm.fade(
                        _vm.mergedColor[1] || _vm.defaultColor[1],
                        70
                      ),
                      result: "glowColor"
                    }
                  },
                  [
                    _c("animate", {
                      attrs: {
                        attributeName: "flood-color",
                        values:
                          "\n              " +
                          _vm.fade(
                            _vm.mergedColor[1] || _vm.defaultColor[1],
                            70
                          ) +
                          ";\n              " +
                          _vm.fade(
                            _vm.mergedColor[1] || _vm.defaultColor[1],
                            30
                          ) +
                          ";\n              " +
                          _vm.fade(
                            _vm.mergedColor[1] || _vm.defaultColor[1],
                            70
                          ) +
                          ";\n            ",
                        dur: "3s",
                        begin: "0s",
                        repeatCount: "indefinite"
                      }
                    })
                  ]
                ),
                _vm._v(" "),
                _c("feComposite", {
                  attrs: {
                    in: "glowColor",
                    in2: "blurred",
                    operator: "in",
                    result: "softGlowColored"
                  }
                }),
                _vm._v(" "),
                _c(
                  "feMerge",
                  [
                    _c("feMergeNode", { attrs: { in: "softGlowColored" } }),
                    _vm._v(" "),
                    _c("feMergeNode", { attrs: { in: "SourceGraphic" } })
                  ],
                  1
                )
              ],
              1
            )
          ]),
          _vm._v(" "),
          _vm.width && _vm.height
            ? _c("path", {
                attrs: {
                  fill: _vm.backgroundColor,
                  "stroke-width": "2",
                  stroke: _vm.mergedColor[0],
                  d:
                    "\n        M15 5 L " +
                    (_vm.width - 15) +
                    " 5 Q " +
                    (_vm.width - 5) +
                    " 5, " +
                    (_vm.width - 5) +
                    " 15\n        L " +
                    (_vm.width - 5) +
                    " " +
                    (_vm.height - 15) +
                    " Q " +
                    (_vm.width - 5) +
                    " " +
                    (_vm.height - 5) +
                    ", " +
                    (_vm.width - 15) +
                    " " +
                    (_vm.height - 5) +
                    "\n        L 15, " +
                    (_vm.height - 5) +
                    " Q 5 " +
                    (_vm.height - 5) +
                    " 5 " +
                    (_vm.height - 15) +
                    " L 5 15\n        Q 5 5 15 5\n      "
                }
              })
            : _vm._e(),
          _vm._v(" "),
          _c("path", {
            attrs: {
              "stroke-width": "2",
              fill: "transparent",
              "stroke-linecap": "round",
              filter: "url(#" + _vm.filterId + ")",
              stroke: _vm.mergedColor[1],
              d: "M 20 5 L 15 5 Q 5 5 5 15 L 5 20"
            }
          }),
          _vm._v(" "),
          _c("path", {
            attrs: {
              "stroke-width": "2",
              fill: "transparent",
              "stroke-linecap": "round",
              filter: "url(#" + _vm.filterId + ")",
              stroke: _vm.mergedColor[1],
              d:
                "M " +
                (_vm.width - 20) +
                " 5 L " +
                (_vm.width - 15) +
                " 5 Q " +
                (_vm.width - 5) +
                " 5 " +
                (_vm.width - 5) +
                " 15 L " +
                (_vm.width - 5) +
                " 20"
            }
          }),
          _vm._v(" "),
          _c("path", {
            attrs: {
              "stroke-width": "2",
              fill: "transparent",
              "stroke-linecap": "round",
              filter: "url(#" + _vm.filterId + ")",
              stroke: _vm.mergedColor[1],
              d:
                "\n        M " +
                (_vm.width - 20) +
                " " +
                (_vm.height - 5) +
                " L " +
                (_vm.width - 15) +
                " " +
                (_vm.height - 5) +
                "\n        Q " +
                (_vm.width - 5) +
                " " +
                (_vm.height - 5) +
                " " +
                (_vm.width - 5) +
                " " +
                (_vm.height - 15) +
                "\n        L " +
                (_vm.width - 5) +
                " " +
                (_vm.height - 20) +
                "\n      "
            }
          }),
          _vm._v(" "),
          _c("path", {
            attrs: {
              "stroke-width": "2",
              fill: "transparent",
              "stroke-linecap": "round",
              filter: "url(#" + _vm.filterId + ")",
              stroke: _vm.mergedColor[1],
              d:
                "\n        M 20 " +
                (_vm.height - 5) +
                " L 15 " +
                (_vm.height - 5) +
                "\n        Q 5 " +
                (_vm.height - 5) +
                " 5 " +
                (_vm.height - 15) +
                "\n        L 5 " +
                (_vm.height - 20) +
                "\n      "
            }
          })
        ]
      ),
      _vm._v(" "),
      _c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
    ])
  };
  var __vue_staticRenderFns__$d = [];
  __vue_render__$d._withStripped = true;

    /* style */
    const __vue_inject_styles__$d = function (inject) {
      if (!inject) return
      inject("data-v-40c58fd4_0", { source: ".dv-border-box-12 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-12 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$d = undefined;
    /* module identifier */
    const __vue_module_identifier__$d = undefined;
    /* functional template */
    const __vue_is_functional_template__$d = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$d = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
      __vue_inject_styles__$d,
      __vue_script__$d,
      __vue_scope_id__$d,
      __vue_is_functional_template__$d,
      __vue_module_identifier__$d,
      false,
      createInjector,
      undefined,
      undefined
    );

  function borderBox12 (Vue) {
    Vue.component(__vue_component__$d.name, __vue_component__$d);
  }

  //
  var script$e = {
    name: 'DvBorderBox13',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      backgroundColor: {
        type: String,
        default: 'transparent'
      }
    },

    data() {
      return {
        ref: 'border-box-13',
        defaultColor: ['#6586ec', '#2cf7fe'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$e = script$e;

  /* template */
  var __vue_render__$e = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-13" }, [
      _c(
        "svg",
        {
          staticClass: "dv-border-svg-container",
          attrs: { width: _vm.width, height: _vm.height }
        },
        [
          _c("path", {
            attrs: {
              fill: _vm.backgroundColor,
              stroke: _vm.mergedColor[0],
              d:
                "\n        M 5 20 L 5 10 L 12 3  L 60 3 L 68 10\n        L " +
                (_vm.width - 20) +
                " 10 L " +
                (_vm.width - 5) +
                " 25\n        L " +
                (_vm.width - 5) +
                " " +
                (_vm.height - 5) +
                " L 20 " +
                (_vm.height - 5) +
                "\n        L 5 " +
                (_vm.height - 20) +
                " L 5 20\n      "
            }
          }),
          _vm._v(" "),
          _c("path", {
            attrs: {
              fill: "transparent",
              "stroke-width": "3",
              "stroke-linecap": "round",
              "stroke-dasharray": "10, 5",
              stroke: _vm.mergedColor[0],
              d: "M 16 9 L 61 9"
            }
          }),
          _vm._v(" "),
          _c("path", {
            attrs: {
              fill: "transparent",
              stroke: _vm.mergedColor[1],
              d: "M 5 20 L 5 10 L 12 3  L 60 3 L 68 10"
            }
          }),
          _vm._v(" "),
          _c("path", {
            attrs: {
              fill: "transparent",
              stroke: _vm.mergedColor[1],
              d:
                "M " +
                (_vm.width - 5) +
                " " +
                (_vm.height - 30) +
                " L " +
                (_vm.width - 5) +
                " " +
                (_vm.height - 5) +
                " L " +
                (_vm.width - 30) +
                " " +
                (_vm.height - 5)
            }
          })
        ]
      ),
      _vm._v(" "),
      _c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
    ])
  };
  var __vue_staticRenderFns__$e = [];
  __vue_render__$e._withStripped = true;

    /* style */
    const __vue_inject_styles__$e = function (inject) {
      if (!inject) return
      inject("data-v-6c30a53b_0", { source: ".dv-border-box-13 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-13 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$e = undefined;
    /* module identifier */
    const __vue_module_identifier__$e = undefined;
    /* functional template */
    const __vue_is_functional_template__$e = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$e = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
      __vue_inject_styles__$e,
      __vue_script__$e,
      __vue_scope_id__$e,
      __vue_is_functional_template__$e,
      __vue_module_identifier__$e,
      false,
      createInjector,
      undefined,
      undefined
    );

  function borderBox13 (Vue) {
    Vue.component(__vue_component__$e.name, __vue_component__$e);
  }

  //
  var script$f = {
    name: 'DvDecoration1',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      }
    },

    data() {
      const pointSideLength = 2.5;
      return {
        ref: 'decoration-1',
        svgWH: [200, 50],
        svgScale: [1, 1],
        rowNum: 4,
        rowPoints: 20,
        pointSideLength,
        halfPointSideLength: pointSideLength / 2,
        points: [],
        rects: [],
        defaultColor: ['#fff', '#0de7c2'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      afterAutoResizeMixinInit() {
        const {
          calcSVGData
        } = this;
        calcSVGData();
      },

      calcSVGData() {
        const {
          calcPointsPosition,
          calcRectsPosition,
          calcScale
        } = this;
        calcPointsPosition();
        calcRectsPosition();
        calcScale();
      },

      calcPointsPosition() {
        const {
          svgWH,
          rowNum,
          rowPoints
        } = this;
        const [w, h] = svgWH;
        const horizontalGap = w / (rowPoints + 1);
        const verticalGap = h / (rowNum + 1);
        let points = new Array(rowNum).fill(0).map((foo, i) => new Array(rowPoints).fill(0).map((foo, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)]));
        this.points = points.reduce((all, item) => [...all, ...item], []);
      },

      calcRectsPosition() {
        const {
          points,
          rowPoints
        } = this;
        const rect1 = points[rowPoints * 2 - 1];
        const rect2 = points[rowPoints * 2 - 3];
        this.rects = [rect1, rect2];
      },

      calcScale() {
        const {
          width,
          height,
          svgWH
        } = this;
        const [w, h] = svgWH;
        this.svgScale = [width / w, height / h];
      },

      onResize() {
        const {
          calcSVGData
        } = this;
        calcSVGData();
      },

      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$f = script$f;

  /* template */
  var __vue_render__$f = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-1" }, [
      _c(
        "svg",
        {
          style:
            "transform:scale(" + _vm.svgScale[0] + "," + _vm.svgScale[1] + ");",
          attrs: { width: _vm.svgWH[0] + "px", height: _vm.svgWH[1] + "px" }
        },
        [
          _vm._l(_vm.points, function(point, i) {
            return [
              Math.random() > 0.6
                ? _c(
                    "rect",
                    {
                      key: i,
                      attrs: {
                        fill: _vm.mergedColor[0],
                        x: point[0] - _vm.halfPointSideLength,
                        y: point[1] - _vm.halfPointSideLength,
                        width: _vm.pointSideLength,
                        height: _vm.pointSideLength
                      }
                    },
                    [
                      Math.random() > 0.6
                        ? _c("animate", {
                            attrs: {
                              attributeName: "fill",
                              values: _vm.mergedColor[0] + ";transparent",
                              dur: "1s",
                              begin: Math.random() * 2,
                              repeatCount: "indefinite"
                            }
                          })
                        : _vm._e()
                    ]
                  )
                : _vm._e()
            ]
          }),
          _vm._v(" "),
          _vm.rects[0]
            ? _c(
                "rect",
                {
                  attrs: {
                    fill: _vm.mergedColor[1],
                    x: _vm.rects[0][0] - _vm.pointSideLength,
                    y: _vm.rects[0][1] - _vm.pointSideLength,
                    width: _vm.pointSideLength * 2,
                    height: _vm.pointSideLength * 2
                  }
                },
                [
                  _c("animate", {
                    attrs: {
                      attributeName: "width",
                      values: "0;" + _vm.pointSideLength * 2,
                      dur: "2s",
                      repeatCount: "indefinite"
                    }
                  }),
                  _vm._v(" "),
                  _c("animate", {
                    attrs: {
                      attributeName: "height",
                      values: "0;" + _vm.pointSideLength * 2,
                      dur: "2s",
                      repeatCount: "indefinite"
                    }
                  }),
                  _vm._v(" "),
                  _c("animate", {
                    attrs: {
                      attributeName: "x",
                      values:
                        _vm.rects[0][0] +
                        ";" +
                        (_vm.rects[0][0] - _vm.pointSideLength),
                      dur: "2s",
                      repeatCount: "indefinite"
                    }
                  }),
                  _vm._v(" "),
                  _c("animate", {
                    attrs: {
                      attributeName: "y",
                      values:
                        _vm.rects[0][1] +
                        ";" +
                        (_vm.rects[0][1] - _vm.pointSideLength),
                      dur: "2s",
                      repeatCount: "indefinite"
                    }
                  })
                ]
              )
            : _vm._e(),
          _vm._v(" "),
          _vm.rects[1]
            ? _c(
                "rect",
                {
                  attrs: {
                    fill: _vm.mergedColor[1],
                    x: _vm.rects[1][0] - 40,
                    y: _vm.rects[1][1] - _vm.pointSideLength,
                    width: 40,
                    height: _vm.pointSideLength * 2
                  }
                },
                [
                  _c("animate", {
                    attrs: {
                      attributeName: "width",
                      values: "0;40;0",
                      dur: "2s",
                      repeatCount: "indefinite"
                    }
                  }),
                  _vm._v(" "),
                  _c("animate", {
                    attrs: {
                      attributeName: "x",
                      values:
                        _vm.rects[1][0] +
                        ";" +
                        (_vm.rects[1][0] - 40) +
                        ";" +
                        _vm.rects[1][0],
                      dur: "2s",
                      repeatCount: "indefinite"
                    }
                  })
                ]
              )
            : _vm._e()
        ],
        2
      )
    ])
  };
  var __vue_staticRenderFns__$f = [];
  __vue_render__$f._withStripped = true;

    /* style */
    const __vue_inject_styles__$f = function (inject) {
      if (!inject) return
      inject("data-v-69241e60_0", { source: ".dv-decoration-1 {\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-1 svg {\n  transform-origin: left top;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,0BAA0B;AAC5B","file":"main.vue","sourcesContent":[".dv-decoration-1 {\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-1 svg {\n  transform-origin: left top;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$f = undefined;
    /* module identifier */
    const __vue_module_identifier__$f = undefined;
    /* functional template */
    const __vue_is_functional_template__$f = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$f = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$f, staticRenderFns: __vue_staticRenderFns__$f },
      __vue_inject_styles__$f,
      __vue_script__$f,
      __vue_scope_id__$f,
      __vue_is_functional_template__$f,
      __vue_module_identifier__$f,
      false,
      createInjector,
      undefined,
      undefined
    );

  function decoration1 (Vue) {
    Vue.component(__vue_component__$f.name, __vue_component__$f);
  }

  //
  var script$g = {
    name: 'DvDecoration2',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      reverse: {
        type: Boolean,
        default: false
      },
      dur: {
        type: Number,
        default: 6
      }
    },

    data() {
      return {
        ref: 'decoration-2',
        x: 0,
        y: 0,
        w: 0,
        h: 0,
        defaultColor: ['#3faacb', '#fff'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      },

      reverse() {
        const {
          calcSVGData
        } = this;
        calcSVGData();
      }

    },
    methods: {
      afterAutoResizeMixinInit() {
        const {
          calcSVGData
        } = this;
        calcSVGData();
      },

      calcSVGData() {
        const {
          reverse,
          width,
          height
        } = this;

        if (reverse) {
          this.w = 1;
          this.h = height;
          this.x = width / 2;
          this.y = 0;
        } else {
          this.w = width;
          this.h = 1;
          this.x = 0;
          this.y = height / 2;
        }
      },

      onResize() {
        const {
          calcSVGData
        } = this;
        calcSVGData();
      },

      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$g = script$g;

  /* template */
  var __vue_render__$g = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-2" }, [
      _c(
        "svg",
        { attrs: { width: _vm.width + "px", height: _vm.height + "px" } },
        [
          _c(
            "rect",
            {
              attrs: {
                x: _vm.x,
                y: _vm.y,
                width: _vm.w,
                height: _vm.h,
                fill: _vm.mergedColor[0]
              }
            },
            [
              _c("animate", {
                attrs: {
                  attributeName: _vm.reverse ? "height" : "width",
                  from: "0",
                  to: _vm.reverse ? _vm.height : _vm.width,
                  dur: _vm.dur + "s",
                  calcMode: "spline",
                  keyTimes: "0;1",
                  keySplines: ".42,0,.58,1",
                  repeatCount: "indefinite"
                }
              })
            ]
          ),
          _vm._v(" "),
          _c(
            "rect",
            {
              attrs: {
                x: _vm.x,
                y: _vm.y,
                width: "1",
                height: "1",
                fill: _vm.mergedColor[1]
              }
            },
            [
              _c("animate", {
                attrs: {
                  attributeName: _vm.reverse ? "y" : "x",
                  from: "0",
                  to: _vm.reverse ? _vm.height : _vm.width,
                  dur: _vm.dur + "s",
                  calcMode: "spline",
                  keyTimes: "0;1",
                  keySplines: "0.42,0,0.58,1",
                  repeatCount: "indefinite"
                }
              })
            ]
          )
        ]
      )
    ])
  };
  var __vue_staticRenderFns__$g = [];
  __vue_render__$g._withStripped = true;

    /* style */
    const __vue_inject_styles__$g = function (inject) {
      if (!inject) return
      inject("data-v-355e4674_0", { source: ".dv-decoration-2 {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,WAAW;EACX,YAAY;EACZ,uBAAuB;EACvB,mBAAmB;AACrB","file":"main.vue","sourcesContent":[".dv-decoration-2 {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$g = undefined;
    /* module identifier */
    const __vue_module_identifier__$g = undefined;
    /* functional template */
    const __vue_is_functional_template__$g = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$g = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$g, staticRenderFns: __vue_staticRenderFns__$g },
      __vue_inject_styles__$g,
      __vue_script__$g,
      __vue_scope_id__$g,
      __vue_is_functional_template__$g,
      __vue_module_identifier__$g,
      false,
      createInjector,
      undefined,
      undefined
    );

  function decoration2 (Vue) {
    Vue.component(__vue_component__$g.name, __vue_component__$g);
  }

  //
  var script$h = {
    name: 'DvDecoration3',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      }
    },

    data() {
      const pointSideLength = 7;
      return {
        ref: 'decoration-3',
        svgWH: [300, 35],
        svgScale: [1, 1],
        rowNum: 2,
        rowPoints: 25,
        pointSideLength,
        halfPointSideLength: pointSideLength / 2,
        points: [],
        defaultColor: ['#7acaec', 'transparent'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      afterAutoResizeMixinInit() {
        const {
          calcSVGData
        } = this;
        calcSVGData();
      },

      calcSVGData() {
        const {
          calcPointsPosition,
          calcScale
        } = this;
        calcPointsPosition();
        calcScale();
      },

      calcPointsPosition() {
        const {
          svgWH,
          rowNum,
          rowPoints
        } = this;
        const [w, h] = svgWH;
        const horizontalGap = w / (rowPoints + 1);
        const verticalGap = h / (rowNum + 1);
        let points = new Array(rowNum).fill(0).map((foo, i) => new Array(rowPoints).fill(0).map((foo, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)]));
        this.points = points.reduce((all, item) => [...all, ...item], []);
      },

      calcScale() {
        const {
          width,
          height,
          svgWH
        } = this;
        const [w, h] = svgWH;
        this.svgScale = [width / w, height / h];
      },

      onResize() {
        const {
          calcSVGData
        } = this;
        calcSVGData();
      },

      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$h = script$h;

  /* template */
  var __vue_render__$h = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-3" }, [
      _c(
        "svg",
        {
          style:
            "transform:scale(" + _vm.svgScale[0] + "," + _vm.svgScale[1] + ");",
          attrs: { width: _vm.svgWH[0] + "px", height: _vm.svgWH[1] + "px" }
        },
        [
          _vm._l(_vm.points, function(point, i) {
            return [
              _c(
                "rect",
                {
                  key: i,
                  attrs: {
                    fill: _vm.mergedColor[0],
                    x: point[0] - _vm.halfPointSideLength,
                    y: point[1] - _vm.halfPointSideLength,
                    width: _vm.pointSideLength,
                    height: _vm.pointSideLength
                  }
                },
                [
                  Math.random() > 0.6
                    ? _c("animate", {
                        attrs: {
                          attributeName: "fill",
                          values: "" + _vm.mergedColor.join(";"),
                          dur: Math.random() + 1 + "s",
                          begin: Math.random() * 2,
                          repeatCount: "indefinite"
                        }
                      })
                    : _vm._e()
                ]
              )
            ]
          })
        ],
        2
      )
    ])
  };
  var __vue_staticRenderFns__$h = [];
  __vue_render__$h._withStripped = true;

    /* style */
    const __vue_inject_styles__$h = function (inject) {
      if (!inject) return
      inject("data-v-2cd3ac93_0", { source: ".dv-decoration-3 {\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-3 svg {\n  transform-origin: left top;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,0BAA0B;AAC5B","file":"main.vue","sourcesContent":[".dv-decoration-3 {\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-3 svg {\n  transform-origin: left top;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$h = undefined;
    /* module identifier */
    const __vue_module_identifier__$h = undefined;
    /* functional template */
    const __vue_is_functional_template__$h = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$h = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$h, staticRenderFns: __vue_staticRenderFns__$h },
      __vue_inject_styles__$h,
      __vue_script__$h,
      __vue_scope_id__$h,
      __vue_is_functional_template__$h,
      __vue_module_identifier__$h,
      false,
      createInjector,
      undefined,
      undefined
    );

  function decoration3 (Vue) {
    Vue.component(__vue_component__$h.name, __vue_component__$h);
  }

  //
  var script$i = {
    name: 'DvDecoration4',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      reverse: {
        type: Boolean,
        default: false
      },
      dur: {
        type: Number,
        default: 3
      }
    },

    data() {
      return {
        ref: 'decoration-4',
        defaultColor: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.3)'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$i = script$i;

  /* template */
  var __vue_render__$i = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-4" }, [
      _c(
        "div",
        {
          class: "container " + (_vm.reverse ? "reverse" : "normal"),
          style: _vm.reverse
            ? "width:" +
              _vm.width +
              "px;height:5px;animation-duration:" +
              _vm.dur +
              "s"
            : "width:5px;height:" +
              _vm.height +
              "px;animation-duration:" +
              _vm.dur +
              "s"
        },
        [
          _c(
            "svg",
            {
              attrs: {
                width: _vm.reverse ? _vm.width : 5,
                height: _vm.reverse ? 5 : _vm.height
              }
            },
            [
              _c("polyline", {
                attrs: {
                  stroke: _vm.mergedColor[0],
                  points: _vm.reverse
                    ? "0, 2.5 " + _vm.width + ", 2.5"
                    : "2.5, 0 2.5, " + _vm.height
                }
              }),
              _vm._v(" "),
              _c("polyline", {
                staticClass: "bold-line",
                attrs: {
                  stroke: _vm.mergedColor[1],
                  "stroke-width": "3",
                  "stroke-dasharray": "20, 80",
                  "stroke-dashoffset": "-30",
                  points: _vm.reverse
                    ? "0, 2.5 " + _vm.width + ", 2.5"
                    : "2.5, 0 2.5, " + _vm.height
                }
              })
            ]
          )
        ]
      )
    ])
  };
  var __vue_staticRenderFns__$i = [];
  __vue_render__$i._withStripped = true;

    /* style */
    const __vue_inject_styles__$i = function (inject) {
      if (!inject) return
      inject("data-v-506ac984_0", { source: ".dv-decoration-4 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-4 .container {\n  display: flex;\n  overflow: hidden;\n  position: absolute;\n  flex: 1;\n}\n.dv-decoration-4 .normal {\n  animation: ani-height ease-in-out infinite;\n  left: 50%;\n  margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n  animation: ani-width ease-in-out infinite;\n  top: 50%;\n  margin-top: -2px;\n}\n@keyframes ani-height {\n0% {\n    height: 0%;\n}\n70% {\n    height: 100%;\n}\n100% {\n    height: 100%;\n}\n}\n@keyframes ani-width {\n0% {\n    width: 0%;\n}\n70% {\n    width: 100%;\n}\n100% {\n    width: 100%;\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,aAAa;EACb,gBAAgB;EAChB,kBAAkB;EAClB,OAAO;AACT;AACA;EACE,0CAA0C;EAC1C,SAAS;EACT,iBAAiB;AACnB;AACA;EACE,yCAAyC;EACzC,QAAQ;EACR,gBAAgB;AAClB;AACA;AACE;IACE,UAAU;AACZ;AACA;IACE,YAAY;AACd;AACA;IACE,YAAY;AACd;AACF;AACA;AACE;IACE,SAAS;AACX;AACA;IACE,WAAW;AACb;AACA;IACE,WAAW;AACb;AACF","file":"main.vue","sourcesContent":[".dv-decoration-4 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-4 .container {\n  display: flex;\n  overflow: hidden;\n  position: absolute;\n  flex: 1;\n}\n.dv-decoration-4 .normal {\n  animation: ani-height ease-in-out infinite;\n  left: 50%;\n  margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n  animation: ani-width ease-in-out infinite;\n  top: 50%;\n  margin-top: -2px;\n}\n@keyframes ani-height {\n  0% {\n    height: 0%;\n  }\n  70% {\n    height: 100%;\n  }\n  100% {\n    height: 100%;\n  }\n}\n@keyframes ani-width {\n  0% {\n    width: 0%;\n  }\n  70% {\n    width: 100%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$i = undefined;
    /* module identifier */
    const __vue_module_identifier__$i = undefined;
    /* functional template */
    const __vue_is_functional_template__$i = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$i = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$i, staticRenderFns: __vue_staticRenderFns__$i },
      __vue_inject_styles__$i,
      __vue_script__$i,
      __vue_scope_id__$i,
      __vue_is_functional_template__$i,
      __vue_module_identifier__$i,
      false,
      createInjector,
      undefined,
      undefined
    );

  function decoration4 (Vue) {
    Vue.component(__vue_component__$i.name, __vue_component__$i);
  }

  //
  var script$j = {
    name: 'DvDecoration5',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      dur: {
        type: Number,
        default: 1.2
      }
    },

    data() {
      return {
        ref: 'decoration-5',
        line1Points: '',
        line2Points: '',
        line1Length: 0,
        line2Length: 0,
        defaultColor: ['#3f96a5', '#3f96a5'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      afterAutoResizeMixinInit() {
        const {
          calcSVGData
        } = this;
        calcSVGData();
      },

      calcSVGData() {
        const {
          width,
          height
        } = this;
        let line1Points = [[0, height * 0.2], [width * 0.18, height * 0.2], [width * 0.2, height * 0.4], [width * 0.25, height * 0.4], [width * 0.27, height * 0.6], [width * 0.72, height * 0.6], [width * 0.75, height * 0.4], [width * 0.8, height * 0.4], [width * 0.82, height * 0.2], [width, height * 0.2]];
        let line2Points = [[width * 0.3, height * 0.8], [width * 0.7, height * 0.8]];
        const line1Length = util_7$1(line1Points);
        const line2Length = util_7$1(line2Points);
        line1Points = line1Points.map(point => point.join(',')).join(' ');
        line2Points = line2Points.map(point => point.join(',')).join(' ');
        this.line1Points = line1Points;
        this.line2Points = line2Points;
        this.line1Length = line1Length;
        this.line2Length = line2Length;
      },

      onResize() {
        const {
          calcSVGData
        } = this;
        calcSVGData();
      },

      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$j = script$j;

  /* template */
  var __vue_render__$j = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-5" }, [
      _c("svg", { attrs: { width: _vm.width, height: _vm.height } }, [
        _c(
          "polyline",
          {
            attrs: {
              fill: "transparent",
              stroke: _vm.mergedColor[0],
              "stroke-width": "3",
              points: _vm.line1Points
            }
          },
          [
            _c("animate", {
              attrs: {
                attributeName: "stroke-dasharray",
                attributeType: "XML",
                from: "0, " + _vm.line1Length / 2 + ", 0, " + _vm.line1Length / 2,
                to: "0, 0, " + _vm.line1Length + ", 0",
                dur: _vm.dur + "s",
                begin: "0s",
                calcMode: "spline",
                keyTimes: "0;1",
                keySplines: "0.4,1,0.49,0.98",
                repeatCount: "indefinite"
              }
            })
          ]
        ),
        _vm._v(" "),
        _c(
          "polyline",
          {
            attrs: {
              fill: "transparent",
              stroke: _vm.mergedColor[1],
              "stroke-width": "2",
              points: _vm.line2Points
            }
          },
          [
            _c("animate", {
              attrs: {
                attributeName: "stroke-dasharray",
                attributeType: "XML",
                from: "0, " + _vm.line2Length / 2 + ", 0, " + _vm.line2Length / 2,
                to: "0, 0, " + _vm.line2Length + ", 0",
                dur: _vm.dur + "s",
                begin: "0s",
                calcMode: "spline",
                keyTimes: "0;1",
                keySplines: ".4,1,.49,.98",
                repeatCount: "indefinite"
              }
            })
          ]
        )
      ])
    ])
  };
  var __vue_staticRenderFns__$j = [];
  __vue_render__$j._withStripped = true;

    /* style */
    const __vue_inject_styles__$j = function (inject) {
      if (!inject) return
      inject("data-v-183f85bc_0", { source: ".dv-decoration-5 {\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-decoration-5 {\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$j = undefined;
    /* module identifier */
    const __vue_module_identifier__$j = undefined;
    /* functional template */
    const __vue_is_functional_template__$j = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$j = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$j, staticRenderFns: __vue_staticRenderFns__$j },
      __vue_inject_styles__$j,
      __vue_script__$j,
      __vue_scope_id__$j,
      __vue_is_functional_template__$j,
      __vue_module_identifier__$j,
      false,
      createInjector,
      undefined,
      undefined
    );

  function decoration5 (Vue) {
    Vue.component(__vue_component__$j.name, __vue_component__$j);
  }

  //
  var script$k = {
    name: 'DvDecoration6',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      }
    },

    data() {
      const rectWidth = 7;
      return {
        ref: 'decoration-6',
        svgWH: [300, 35],
        svgScale: [1, 1],
        rowNum: 1,
        rowPoints: 40,
        rectWidth,
        halfRectWidth: rectWidth / 2,
        points: [],
        heights: [],
        minHeights: [],
        randoms: [],
        defaultColor: ['#7acaec', '#7acaec'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      afterAutoResizeMixinInit() {
        const {
          calcSVGData
        } = this;
        calcSVGData();
      },

      calcSVGData() {
        const {
          calcPointsPosition,
          calcScale
        } = this;
        calcPointsPosition();
        calcScale();
      },

      calcPointsPosition() {
        const {
          svgWH,
          rowNum,
          rowPoints
        } = this;
        const [w, h] = svgWH;
        const horizontalGap = w / (rowPoints + 1);
        const verticalGap = h / (rowNum + 1);
        let points = new Array(rowNum).fill(0).map((foo, i) => new Array(rowPoints).fill(0).map((foo, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)]));
        this.points = points.reduce((all, item) => [...all, ...item], []);
        const heights = this.heights = new Array(rowNum * rowPoints).fill(0).map(foo => Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h));
        this.minHeights = new Array(rowNum * rowPoints).fill(0).map((foo, i) => heights[i] * Math.random());
        this.randoms = new Array(rowNum * rowPoints).fill(0).map(foo => Math.random() + 1.5);
      },

      calcScale() {
        const {
          width,
          height,
          svgWH
        } = this;
        const [w, h] = svgWH;
        this.svgScale = [width / w, height / h];
      },

      onResize() {
        const {
          calcSVGData
        } = this;
        calcSVGData();
      },

      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$k = script$k;

  /* template */
  var __vue_render__$k = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-6" }, [
      _c(
        "svg",
        {
          style:
            "transform:scale(" + _vm.svgScale[0] + "," + _vm.svgScale[1] + ");",
          attrs: { width: _vm.svgWH[0] + "px", height: _vm.svgWH[1] + "px" }
        },
        [
          _vm._l(_vm.points, function(point, i) {
            return [
              _c(
                "rect",
                {
                  key: i,
                  attrs: {
                    fill: _vm.mergedColor[Math.random() > 0.5 ? 0 : 1],
                    x: point[0] - _vm.halfRectWidth,
                    y: point[1] - _vm.heights[i] / 2,
                    width: _vm.rectWidth,
                    height: _vm.heights[i]
                  }
                },
                [
                  _c("animate", {
                    attrs: {
                      attributeName: "y",
                      values:
                        point[1] -
                        _vm.minHeights[i] / 2 +
                        ";" +
                        (point[1] - _vm.heights[i] / 2) +
                        ";" +
                        (point[1] - _vm.minHeights[i] / 2),
                      dur: _vm.randoms[i] + "s",
                      keyTimes: "0;0.5;1",
                      calcMode: "spline",
                      keySplines: "0.42,0,0.58,1;0.42,0,0.58,1",
                      begin: "0s",
                      repeatCount: "indefinite"
                    }
                  }),
                  _vm._v(" "),
                  _c("animate", {
                    attrs: {
                      attributeName: "height",
                      values:
                        _vm.minHeights[i] +
                        ";" +
                        _vm.heights[i] +
                        ";" +
                        _vm.minHeights[i],
                      dur: _vm.randoms[i] + "s",
                      keyTimes: "0;0.5;1",
                      calcMode: "spline",
                      keySplines: "0.42,0,0.58,1;0.42,0,0.58,1",
                      begin: "0s",
                      repeatCount: "indefinite"
                    }
                  })
                ]
              )
            ]
          })
        ],
        2
      )
    ])
  };
  var __vue_staticRenderFns__$k = [];
  __vue_render__$k._withStripped = true;

    /* style */
    const __vue_inject_styles__$k = function (inject) {
      if (!inject) return
      inject("data-v-a29c4fc2_0", { source: ".dv-decoration-6 {\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-6 svg {\n  transform-origin: left top;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,0BAA0B;AAC5B","file":"main.vue","sourcesContent":[".dv-decoration-6 {\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-6 svg {\n  transform-origin: left top;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$k = undefined;
    /* module identifier */
    const __vue_module_identifier__$k = undefined;
    /* functional template */
    const __vue_is_functional_template__$k = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$k = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$k, staticRenderFns: __vue_staticRenderFns__$k },
      __vue_inject_styles__$k,
      __vue_script__$k,
      __vue_scope_id__$k,
      __vue_is_functional_template__$k,
      __vue_module_identifier__$k,
      false,
      createInjector,
      undefined,
      undefined
    );

  function decoration6 (Vue) {
    Vue.component(__vue_component__$k.name, __vue_component__$k);
  }

  //
  var script$l = {
    name: 'DvDecoration7',
    props: {
      color: {
        type: Array,
        default: () => []
      }
    },

    data() {
      return {
        defaultColor: ['#1dc1f5', '#1dc1f5'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$l = script$l;

  /* template */
  var __vue_render__$l = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c(
      "div",
      { staticClass: "dv-decoration-7" },
      [
        _c("svg", { attrs: { width: "21px", height: "20px" } }, [
          _c("polyline", {
            attrs: {
              "stroke-width": "4",
              fill: "transparent",
              stroke: _vm.mergedColor[0],
              points: "10, 0 19, 10 10, 20"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              "stroke-width": "2",
              fill: "transparent",
              stroke: _vm.mergedColor[1],
              points: "2, 0 11, 10 2, 20"
            }
          })
        ]),
        _vm._v(" "),
        _vm._t("default"),
        _vm._v(" "),
        _c("svg", { attrs: { width: "21px", height: "20px" } }, [
          _c("polyline", {
            attrs: {
              "stroke-width": "4",
              fill: "transparent",
              stroke: _vm.mergedColor[0],
              points: "11, 0 2, 10 11, 20"
            }
          }),
          _vm._v(" "),
          _c("polyline", {
            attrs: {
              "stroke-width": "2",
              fill: "transparent",
              stroke: _vm.mergedColor[1],
              points: "19, 0 10, 10 19, 20"
            }
          })
        ])
      ],
      2
    )
  };
  var __vue_staticRenderFns__$l = [];
  __vue_render__$l._withStripped = true;

    /* style */
    const __vue_inject_styles__$l = function (inject) {
      if (!inject) return
      inject("data-v-b84d1f12_0", { source: ".dv-decoration-7 {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,WAAW;EACX,YAAY;EACZ,uBAAuB;EACvB,mBAAmB;AACrB","file":"main.vue","sourcesContent":[".dv-decoration-7 {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$l = undefined;
    /* module identifier */
    const __vue_module_identifier__$l = undefined;
    /* functional template */
    const __vue_is_functional_template__$l = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$l = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$l, staticRenderFns: __vue_staticRenderFns__$l },
      __vue_inject_styles__$l,
      __vue_script__$l,
      __vue_scope_id__$l,
      __vue_is_functional_template__$l,
      __vue_module_identifier__$l,
      false,
      createInjector,
      undefined,
      undefined
    );

  function decoration7 (Vue) {
    Vue.component(__vue_component__$l.name, __vue_component__$l);
  }

  //
  var script$m = {
    name: 'DvDecoration8',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      reverse: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        ref: 'decoration-8',
        defaultColor: ['#3f96a5', '#3f96a5'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      xPos(pos) {
        const {
          reverse,
          width
        } = this;
        if (!reverse) return pos;
        return width - pos;
      },

      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$m = script$m;

  /* template */
  var __vue_render__$m = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-8" }, [
      _c("svg", { attrs: { width: _vm.width, height: _vm.height } }, [
        _c("polyline", {
          attrs: {
            stroke: _vm.mergedColor[0],
            "stroke-width": "2",
            fill: "transparent",
            points: _vm.xPos(0) + ", 0 " + _vm.xPos(30) + ", " + _vm.height / 2
          }
        }),
        _vm._v(" "),
        _c("polyline", {
          attrs: {
            stroke: _vm.mergedColor[0],
            "stroke-width": "2",
            fill: "transparent",
            points:
              _vm.xPos(20) +
              ", 0 " +
              _vm.xPos(50) +
              ", " +
              _vm.height / 2 +
              " " +
              _vm.xPos(_vm.width) +
              ", " +
              _vm.height / 2
          }
        }),
        _vm._v(" "),
        _c("polyline", {
          attrs: {
            stroke: _vm.mergedColor[1],
            fill: "transparent",
            "stroke-width": "3",
            points:
              _vm.xPos(0) +
              ", " +
              (_vm.height - 3) +
              ", " +
              _vm.xPos(200) +
              ", " +
              (_vm.height - 3)
          }
        })
      ])
    ])
  };
  var __vue_staticRenderFns__$m = [];
  __vue_render__$m._withStripped = true;

    /* style */
    const __vue_inject_styles__$m = function (inject) {
      if (!inject) return
      inject("data-v-53cf43a5_0", { source: ".dv-decoration-8 {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-decoration-8 {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$m = undefined;
    /* module identifier */
    const __vue_module_identifier__$m = undefined;
    /* functional template */
    const __vue_is_functional_template__$m = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$m = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$m, staticRenderFns: __vue_staticRenderFns__$m },
      __vue_inject_styles__$m,
      __vue_script__$m,
      __vue_scope_id__$m,
      __vue_is_functional_template__$m,
      __vue_module_identifier__$m,
      false,
      createInjector,
      undefined,
      undefined
    );

  function decoration8 (Vue) {
    Vue.component(__vue_component__$m.name, __vue_component__$m);
  }

  //
  var script$n = {
    name: 'DvDecoration9',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },
      dur: {
        type: Number,
        default: 3
      }
    },

    data() {
      const id = uuid();
      return {
        ref: 'decoration-9',
        polygonId: `decoration-9-polygon-${id}`,
        svgWH: [100, 100],
        svgScale: [1, 1],
        defaultColor: ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      afterAutoResizeMixinInit() {
        const {
          calcScale
        } = this;
        calcScale();
      },

      calcScale() {
        const {
          width,
          height,
          svgWH
        } = this;
        const [w, h] = svgWH;
        this.svgScale = [width / w, height / h];
      },

      onResize() {
        const {
          calcScale
        } = this;
        calcScale();
      },

      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      },

      fade: lib_9
    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$n = script$n;

  /* template */
  var __vue_render__$n = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c(
      "div",
      { ref: _vm.ref, staticClass: "dv-decoration-9" },
      [
        _c(
          "svg",
          {
            style:
              "transform:scale(" + _vm.svgScale[0] + "," + _vm.svgScale[1] + ");",
            attrs: { width: _vm.svgWH[0] + "px", height: _vm.svgWH[1] + "px" }
          },
          [
            _c("defs", [
              _c("polygon", {
                attrs: {
                  id: _vm.polygonId,
                  points: "15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5"
                }
              })
            ]),
            _vm._v(" "),
            _c(
              "circle",
              {
                attrs: {
                  cx: "50",
                  cy: "50",
                  r: "45",
                  fill: "transparent",
                  stroke: _vm.mergedColor[1],
                  "stroke-width": "10",
                  "stroke-dasharray": "80, 100, 30, 100"
                }
              },
              [
                _c("animateTransform", {
                  attrs: {
                    attributeName: "transform",
                    type: "rotate",
                    values: "0 50 50;360 50 50",
                    dur: _vm.dur + "s",
                    repeatCount: "indefinite"
                  }
                })
              ],
              1
            ),
            _vm._v(" "),
            _c(
              "circle",
              {
                attrs: {
                  cx: "50",
                  cy: "50",
                  r: "45",
                  fill: "transparent",
                  stroke: _vm.mergedColor[0],
                  "stroke-width": "6",
                  "stroke-dasharray": "50, 66, 100, 66"
                }
              },
              [
                _c("animateTransform", {
                  attrs: {
                    attributeName: "transform",
                    type: "rotate",
                    values: "0 50 50;-360 50 50",
                    dur: _vm.dur + "s",
                    repeatCount: "indefinite"
                  }
                })
              ],
              1
            ),
            _vm._v(" "),
            _c("circle", {
              attrs: {
                cx: "50",
                cy: "50",
                r: "38",
                fill: "transparent",
                stroke: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 30),
                "stroke-width": "1",
                "stroke-dasharray": "5, 1"
              }
            }),
            _vm._v(" "),
            _vm._l(new Array(20).fill(0), function(foo, i) {
              return _c(
                "use",
                {
                  key: i,
                  attrs: {
                    "xlink:href": "#" + _vm.polygonId,
                    stroke: _vm.mergedColor[1],
                    fill: Math.random() > 0.4 ? "transparent" : _vm.mergedColor[0]
                  }
                },
                [
                  _c("animateTransform", {
                    attrs: {
                      attributeName: "transform",
                      type: "rotate",
                      values: "0 50 50;360 50 50",
                      dur: _vm.dur + "s",
                      begin: (i * _vm.dur) / 20 + "s",
                      repeatCount: "indefinite"
                    }
                  })
                ],
                1
              )
            }),
            _vm._v(" "),
            _c("circle", {
              attrs: {
                cx: "50",
                cy: "50",
                r: "26",
                fill: "transparent",
                stroke: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 30),
                "stroke-width": "1",
                "stroke-dasharray": "5, 1"
              }
            })
          ],
          2
        ),
        _vm._v(" "),
        _vm._t("default")
      ],
      2
    )
  };
  var __vue_staticRenderFns__$n = [];
  __vue_render__$n._withStripped = true;

    /* style */
    const __vue_inject_styles__$n = function (inject) {
      if (!inject) return
      inject("data-v-b47f91a8_0", { source: ".dv-decoration-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dv-decoration-9 svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  transform-origin: left top;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,0BAA0B;AAC5B","file":"main.vue","sourcesContent":[".dv-decoration-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dv-decoration-9 svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  transform-origin: left top;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$n = undefined;
    /* module identifier */
    const __vue_module_identifier__$n = undefined;
    /* functional template */
    const __vue_is_functional_template__$n = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$n = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$n, staticRenderFns: __vue_staticRenderFns__$n },
      __vue_inject_styles__$n,
      __vue_script__$n,
      __vue_scope_id__$n,
      __vue_is_functional_template__$n,
      __vue_module_identifier__$n,
      false,
      createInjector,
      undefined,
      undefined
    );

  function decoration9 (Vue) {
    Vue.component(__vue_component__$n.name, __vue_component__$n);
  }

  //
  var script$o = {
    name: 'DvDecoration10',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      }
    },

    data() {
      const id = uuid();
      return {
        ref: 'decoration-10',
        animationId1: `d10ani1${id}`,
        animationId2: `d10ani2${id}`,
        animationId3: `d10ani3${id}`,
        animationId4: `d10ani4${id}`,
        animationId5: `d10ani5${id}`,
        animationId6: `d10ani6${id}`,
        animationId7: `d10ani7${id}`,
        defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      }

    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$o = script$o;

  /* template */
  var __vue_render__$o = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-10" }, [
      _c("svg", { attrs: { width: _vm.width, height: _vm.height } }, [
        _c("polyline", {
          attrs: {
            stroke: _vm.mergedColor[1],
            "stroke-width": "2",
            points:
              "0, " + _vm.height / 2 + " " + _vm.width + ", " + _vm.height / 2
          }
        }),
        _vm._v(" "),
        _c(
          "polyline",
          {
            attrs: {
              stroke: _vm.mergedColor[0],
              "stroke-width": "2",
              points:
                "5, " +
                _vm.height / 2 +
                " " +
                (_vm.width * 0.2 - 3) +
                ", " +
                _vm.height / 2,
              "stroke-dasharray": "0, " + _vm.width * 0.2,
              fill: "freeze"
            }
          },
          [
            _c("animate", {
              attrs: {
                id: _vm.animationId2,
                attributeName: "stroke-dasharray",
                values: "0, " + _vm.width * 0.2 + ";" + _vm.width * 0.2 + ", 0;",
                dur: "3s",
                begin: _vm.animationId1 + ".end",
                fill: "freeze"
              }
            }),
            _vm._v(" "),
            _c("animate", {
              attrs: {
                attributeName: "stroke-dasharray",
                values: _vm.width * 0.2 + ", 0;0, " + _vm.width * 0.2,
                dur: "0.01s",
                begin: _vm.animationId7 + ".end",
                fill: "freeze"
              }
            })
          ]
        ),
        _vm._v(" "),
        _c(
          "polyline",
          {
            attrs: {
              stroke: _vm.mergedColor[0],
              "stroke-width": "2",
              points:
                _vm.width * 0.2 +
                3 +
                ", " +
                _vm.height / 2 +
                " " +
                (_vm.width * 0.8 - 3) +
                ", " +
                _vm.height / 2,
              "stroke-dasharray": "0, " + _vm.width * 0.6
            }
          },
          [
            _c("animate", {
              attrs: {
                id: _vm.animationId4,
                attributeName: "stroke-dasharray",
                values: "0, " + _vm.width * 0.6 + ";" + _vm.width * 0.6 + ", 0",
                dur: "3s",
                begin: _vm.animationId3 + ".end + 1s",
                fill: "freeze"
              }
            }),
            _vm._v(" "),
            _c("animate", {
              attrs: {
                attributeName: "stroke-dasharray",
                values: _vm.width * 0.6 + ", 0;0, " + _vm.width * 0.6,
                dur: "0.01s",
                begin: _vm.animationId7 + ".end",
                fill: "freeze"
              }
            })
          ]
        ),
        _vm._v(" "),
        _c(
          "polyline",
          {
            attrs: {
              stroke: _vm.mergedColor[0],
              "stroke-width": "2",
              points:
                _vm.width * 0.8 +
                3 +
                ", " +
                _vm.height / 2 +
                " " +
                (_vm.width - 5) +
                ", " +
                _vm.height / 2,
              "stroke-dasharray": "0, " + _vm.width * 0.2
            }
          },
          [
            _c("animate", {
              attrs: {
                id: _vm.animationId6,
                attributeName: "stroke-dasharray",
                values: "0, " + _vm.width * 0.2 + ";" + _vm.width * 0.2 + ", 0",
                dur: "3s",
                begin: _vm.animationId5 + ".end + 1s",
                fill: "freeze"
              }
            }),
            _vm._v(" "),
            _c("animate", {
              attrs: {
                attributeName: "stroke-dasharray",
                values: _vm.width * 0.2 + ", 0;0, " + _vm.width * 0.3,
                dur: "0.01s",
                begin: _vm.animationId7 + ".end",
                fill: "freeze"
              }
            })
          ]
        ),
        _vm._v(" "),
        _c(
          "circle",
          {
            attrs: {
              cx: "2",
              cy: _vm.height / 2,
              r: "2",
              fill: _vm.mergedColor[1]
            }
          },
          [
            _c("animate", {
              attrs: {
                id: _vm.animationId1,
                attributeName: "fill",
                values: _vm.mergedColor[1] + ";" + _vm.mergedColor[0],
                begin: "0s;" + _vm.animationId7 + ".end",
                dur: "0.3s",
                fill: "freeze"
              }
            })
          ]
        ),
        _vm._v(" "),
        _c(
          "circle",
          {
            attrs: {
              cx: _vm.width * 0.2,
              cy: _vm.height / 2,
              r: "2",
              fill: _vm.mergedColor[1]
            }
          },
          [
            _c("animate", {
              attrs: {
                id: _vm.animationId3,
                attributeName: "fill",
                values: _vm.mergedColor[1] + ";" + _vm.mergedColor[0],
                begin: _vm.animationId2 + ".end",
                dur: "0.3s",
                fill: "freeze"
              }
            }),
            _vm._v(" "),
            _c("animate", {
              attrs: {
                attributeName: "fill",
                values: _vm.mergedColor[1] + ";" + _vm.mergedColor[1],
                dur: "0.01s",
                begin: _vm.animationId7 + ".end",
                fill: "freeze"
              }
            })
          ]
        ),
        _vm._v(" "),
        _c(
          "circle",
          {
            attrs: {
              cx: _vm.width * 0.8,
              cy: _vm.height / 2,
              r: "2",
              fill: _vm.mergedColor[1]
            }
          },
          [
            _c("animate", {
              attrs: {
                id: _vm.animationId5,
                attributeName: "fill",
                values: _vm.mergedColor[1] + ";" + _vm.mergedColor[0],
                begin: _vm.animationId4 + ".end",
                dur: "0.3s",
                fill: "freeze"
              }
            }),
            _vm._v(" "),
            _c("animate", {
              attrs: {
                attributeName: "fill",
                values: _vm.mergedColor[1] + ";" + _vm.mergedColor[1],
                dur: "0.01s",
                begin: _vm.animationId7 + ".end",
                fill: "freeze"
              }
            })
          ]
        ),
        _vm._v(" "),
        _c(
          "circle",
          {
            attrs: {
              cx: _vm.width - 2,
              cy: _vm.height / 2,
              r: "2",
              fill: _vm.mergedColor[1]
            }
          },
          [
            _c("animate", {
              attrs: {
                id: _vm.animationId7,
                attributeName: "fill",
                values: _vm.mergedColor[1] + ";" + _vm.mergedColor[0],
                begin: _vm.animationId6 + ".end",
                dur: "0.3s",
                fill: "freeze"
              }
            }),
            _vm._v(" "),
            _c("animate", {
              attrs: {
                attributeName: "fill",
                values: _vm.mergedColor[1] + ";" + _vm.mergedColor[1],
                dur: "0.01s",
                begin: _vm.animationId7 + ".end",
                fill: "freeze"
              }
            })
          ]
        )
      ])
    ])
  };
  var __vue_staticRenderFns__$o = [];
  __vue_render__$o._withStripped = true;

    /* style */
    const __vue_inject_styles__$o = function (inject) {
      if (!inject) return
      inject("data-v-23172a05_0", { source: ".dv-decoration-10 {\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;AACf","file":"main.vue","sourcesContent":[".dv-decoration-10 {\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$o = undefined;
    /* module identifier */
    const __vue_module_identifier__$o = undefined;
    /* functional template */
    const __vue_is_functional_template__$o = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$o = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$o, staticRenderFns: __vue_staticRenderFns__$o },
      __vue_inject_styles__$o,
      __vue_script__$o,
      __vue_scope_id__$o,
      __vue_is_functional_template__$o,
      __vue_module_identifier__$o,
      false,
      createInjector,
      undefined,
      undefined
    );

  function decoration10 (Vue) {
    Vue.component(__vue_component__$o.name, __vue_component__$o);
  }

  //
  var script$p = {
    name: 'DvDecoration11',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      }
    },

    data() {
      return {
        ref: 'decoration-11',
        defaultColor: ['#1a98fc', '#2cf7fe'],
        mergedColor: []
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    methods: {
      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      },

      fade: lib_9
    },

    mounted() {
      const {
        mergeColor
      } = this;
      mergeColor();
    }

  };

  /* script */
  const __vue_script__$p = script$p;

  /* template */
  var __vue_render__$p = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-11" }, [
      _c("svg", { attrs: { width: _vm.width, height: _vm.height } }, [
        _c("polygon", {
          attrs: {
            fill: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 10),
            stroke: _vm.mergedColor[1],
            points: "20 10, 25 4, 55 4 60 10"
          }
        }),
        _vm._v(" "),
        _c("polygon", {
          attrs: {
            fill: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 10),
            stroke: _vm.mergedColor[1],
            points:
              "20 " +
              (_vm.height - 10) +
              ", 25 " +
              (_vm.height - 4) +
              ", 55 " +
              (_vm.height - 4) +
              " 60 " +
              (_vm.height - 10)
          }
        }),
        _vm._v(" "),
        _c("polygon", {
          attrs: {
            fill: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 10),
            stroke: _vm.mergedColor[1],
            points:
              _vm.width -
              20 +
              " 10, " +
              (_vm.width - 25) +
              " 4, " +
              (_vm.width - 55) +
              " 4 " +
              (_vm.width - 60) +
              " 10"
          }
        }),
        _vm._v(" "),
        _c("polygon", {
          attrs: {
            fill: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 10),
            stroke: _vm.mergedColor[1],
            points:
              _vm.width -
              20 +
              " " +
              (_vm.height - 10) +
              ", " +
              (_vm.width - 25) +
              " " +
              (_vm.height - 4) +
              ", " +
              (_vm.width - 55) +
              " " +
              (_vm.height - 4) +
              " " +
              (_vm.width - 60) +
              " " +
              (_vm.height - 10)
          }
        }),
        _vm._v(" "),
        _c("polygon", {
          attrs: {
            fill: _vm.fade(_vm.mergedColor[0] || _vm.defaultColor[0], 20),
            stroke: _vm.mergedColor[0],
            points:
              "\n        20 10, 5 " +
              _vm.height / 2 +
              " 20 " +
              (_vm.height - 10) +
              "\n        " +
              (_vm.width - 20) +
              " " +
              (_vm.height - 10) +
              " " +
              (_vm.width - 5) +
              " " +
              _vm.height / 2 +
              " " +
              (_vm.width - 20) +
              " 10\n      "
          }
        }),
        _vm._v(" "),
        _c("polyline", {
          attrs: {
            fill: "transparent",
            stroke: _vm.fade(_vm.mergedColor[0] || _vm.defaultColor[0], 70),
            points: "25 18, 15 " + _vm.height / 2 + " 25 " + (_vm.height - 18)
          }
        }),
        _vm._v(" "),
        _c("polyline", {
          attrs: {
            fill: "transparent",
            stroke: _vm.fade(_vm.mergedColor[0] || _vm.defaultColor[0], 70),
            points:
              _vm.width -
              25 +
              " 18, " +
              (_vm.width - 15) +
              " " +
              _vm.height / 2 +
              " " +
              (_vm.width - 25) +
              " " +
              (_vm.height - 18)
          }
        })
      ]),
      _vm._v(" "),
      _c("div", { staticClass: "decoration-content" }, [_vm._t("default")], 2)
    ])
  };
  var __vue_staticRenderFns__$p = [];
  __vue_render__$p._withStripped = true;

    /* style */
    const __vue_inject_styles__$p = function (inject) {
      if (!inject) return
      inject("data-v-53895fd4_0", { source: ".dv-decoration-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.dv-decoration-11 .decoration-content {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;AACf;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB","file":"main.vue","sourcesContent":[".dv-decoration-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.dv-decoration-11 .decoration-content {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$p = undefined;
    /* module identifier */
    const __vue_module_identifier__$p = undefined;
    /* functional template */
    const __vue_is_functional_template__$p = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$p = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$p, staticRenderFns: __vue_staticRenderFns__$p },
      __vue_inject_styles__$p,
      __vue_script__$p,
      __vue_scope_id__$p,
      __vue_is_functional_template__$p,
      __vue_module_identifier__$p,
      false,
      createInjector,
      undefined,
      undefined
    );

  function decoration11 (Vue) {
    Vue.component(__vue_component__$p.name, __vue_component__$p);
  }

  //
  var script$q = {
    name: 'DvDecoration12',
    mixins: [autoResize],
    props: {
      color: {
        type: Array,
        default: () => []
      },

      /**
       * @description Scan animation dur
       */
      scanDur: {
        type: Number,
        default: 3
      },

      /**
       * @description Halo animation dur
       */
      haloDur: {
        type: Number,
        default: 2
      }
    },

    data() {
      const id = uuid();
      return {
        ref: 'decoration-12',
        gId: `decoration-12-g-${id}`,
        gradientId: `decoration-12-gradient-${id}`,
        defaultColor: ['#2783ce', '#2cf7fe'],
        mergedColor: [],
        pathD: [],
        pathColor: [],
        circleR: [],
        splitLinePoints: [],
        arcD: [],
        segment: 30,
        sectorAngle: Math.PI / 3,
        ringNum: 3,
        ringWidth: 1,
        showSplitLine: true
      };
    },

    watch: {
      color() {
        const {
          mergeColor
        } = this;
        mergeColor();
      }

    },
    computed: {
      x() {
        const {
          width
        } = this;
        return width / 2;
      },

      y() {
        const {
          height
        } = this;
        return height / 2;
      }

    },
    methods: {
      init() {
        const {
          mergeColor,
          calcPathD,
          calcPathColor,
          calcCircleR,
          calcSplitLinePoints,
          calcArcD
        } = this;
        mergeColor();
        calcPathD();
        calcPathColor();
        calcCircleR();
        calcSplitLinePoints();
        calcArcD();
      },

      mergeColor() {
        const {
          color,
          defaultColor
        } = this;
        this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
      },

      calcPathD() {
        const {
          x,
          y,
          width,
          segment,
          sectorAngle
        } = this;
        const startAngle = -Math.PI / 2;
        const angleGap = sectorAngle / segment;
        const r = width / 4;
        let lastEndPoints = util_13(x, y, r, startAngle);
        this.pathD = new Array(segment).fill('').map((_, i) => {
          const endPoints = util_13(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5));
          const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`;
          lastEndPoints = endPoints;
          return d;
        });
      },

      calcPathColor() {
        const {
          mergedColor: [color],
          segment
        } = this;
        const colorGap = 100 / (segment - 1);
        this.pathColor = new Array(segment).fill(color).map((_, i) => lib_9(color, 100 - i * colorGap));
      },

      calcCircleR() {
        const {
          segment,
          ringNum,
          width,
          ringWidth
        } = this;
        const radiusGap = (width / 2 - ringWidth / 2) / ringNum;
        this.circleR = new Array(ringNum).fill(0).map((_, i) => radiusGap * (i + 1));
      },

      calcSplitLinePoints() {
        const {
          x,
          y,
          width
        } = this;
        const angleGap = Math.PI / 6;
        const r = width / 2;
        this.splitLinePoints = new Array(6).fill('').map((_, i) => {
          const startAngle = angleGap * (i + 1);
          const endAngle = startAngle + Math.PI;
          const startPoint = util_13(x, y, r, startAngle);
          const endPoint = util_13(x, y, r, endAngle);
          return `${startPoint.join(',')} ${endPoint.join(',')}`;
        });
      },

      calcArcD() {
        const {
          x,
          y,
          width
        } = this;
        const angleGap = Math.PI / 6;
        const r = width / 2 - 1;
        this.arcD = new Array(4).fill('').map((_, i) => {
          const startAngle = angleGap * (3 * i + 1);
          const endAngle = startAngle + angleGap;
          const startPoint = util_13(x, y, r, startAngle);
          const endPoint = util_13(x, y, r, endAngle);
          return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`;
        });
      },

      afterAutoResizeMixinInit() {
        const {
          init
        } = this;
        init();
      },

      fade: lib_9
    }
  };

  /* script */
  const __vue_script__$q = script$q;

  /* template */
  var __vue_render__$q = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-12" }, [
      _c(
        "svg",
        { attrs: { width: _vm.width, height: _vm.height } },
        [
          _c(
            "defs",
            [
              _c(
                "g",
                { attrs: { id: _vm.gId } },
                _vm._l(_vm.pathD, function(d, i) {
                  return _c("path", {
                    key: d,
                    attrs: {
                      stroke: _vm.pathColor[i],
                      "stroke-width": _vm.width / 2,
                      fill: "transparent",
                      d: d
                    }
                  })
                }),
                0
              ),
              _vm._v(" "),
              _c(
                "radialGradient",
                { attrs: { id: _vm.gradientId, cx: "50%", cy: "50%", r: "50%" } },
                [
                  _c("stop", {
                    attrs: {
                      offset: "0%",
                      "stop-color": "transparent",
                      "stop-opacity": "1"
                    }
                  }),
                  _vm._v(" "),
                  _c("stop", {
                    attrs: {
                      offset: "100%",
                      "stop-color": _vm.fade(
                        _vm.mergedColor[1] || _vm.defaultColor[1],
                        30
                      ),
                      "stop-opacity": "1"
                    }
                  })
                ],
                1
              )
            ],
            1
          ),
          _vm._v(" "),
          _vm._l(_vm.circleR, function(r) {
            return _c("circle", {
              key: r,
              attrs: {
                r: r,
                cx: _vm.x,
                cy: _vm.y,
                stroke: _vm.mergedColor[1],
                "stroke-width": 0.5,
                fill: "transparent"
              }
            })
          }),
          _vm._v(" "),
          _c(
            "circle",
            {
              attrs: {
                r: "1",
                cx: _vm.x,
                cy: _vm.y,
                stroke: "transparent",
                fill: "url(#" + _vm.gradientId + ")"
              }
            },
            [
              _c("animate", {
                attrs: {
                  attributeName: "r",
                  values: "1;" + _vm.width / 2,
                  dur: _vm.haloDur + "s",
                  repeatCount: "indefinite"
                }
              }),
              _vm._v(" "),
              _c("animate", {
                attrs: {
                  attributeName: "opacity",
                  values: "1;0",
                  dur: _vm.haloDur + "s",
                  repeatCount: "indefinite"
                }
              })
            ]
          ),
          _vm._v(" "),
          _c("circle", {
            attrs: { r: "2", cx: _vm.x, cy: _vm.y, fill: _vm.mergedColor[1] }
          }),
          _vm._v(" "),
          _vm.showSplitLine
            ? _c(
                "g",
                _vm._l(_vm.splitLinePoints, function(p) {
                  return _c("polyline", {
                    key: p,
                    attrs: {
                      points: p,
                      stroke: _vm.mergedColor[1],
                      "stroke-width": 0.5,
                      opacity: "0.5"
                    }
                  })
                }),
                0
              )
            : _vm._e(),
          _vm._v(" "),
          _vm._l(_vm.arcD, function(d) {
            return _c("path", {
              key: d,
              attrs: {
                d: d,
                stroke: _vm.mergedColor[1],
                "stroke-width": "2",
                fill: "transparent"
              }
            })
          }),
          _vm._v(" "),
          _c(
            "use",
            { attrs: { "xlink:href": "#" + _vm.gId } },
            [
              _c("animateTransform", {
                attrs: {
                  attributeName: "transform",
                  type: "rotate",
                  values:
                    "0, " + _vm.x + " " + _vm.y + ";360, " + _vm.x + " " + _vm.y,
                  dur: _vm.scanDur + "s",
                  repeatCount: "indefinite"
                }
              })
            ],
            1
          )
        ],
        2
      ),
      _vm._v(" "),
      _c("div", { staticClass: "decoration-content" }, [_vm._t("default")], 2)
    ])
  };
  var __vue_staticRenderFns__$q = [];
  __vue_render__$q._withStripped = true;

    /* style */
    const __vue_inject_styles__$q = function (inject) {
      if (!inject) return
      inject("data-v-70099a0c_0", { source: ".dv-decoration-12 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.dv-decoration-12 .decoration-content {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;AACf;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB","file":"main.vue","sourcesContent":[".dv-decoration-12 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.dv-decoration-12 .decoration-content {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$q = undefined;
    /* module identifier */
    const __vue_module_identifier__$q = undefined;
    /* functional template */
    const __vue_is_functional_template__$q = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$q = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$q, staticRenderFns: __vue_staticRenderFns__$q },
      __vue_inject_styles__$q,
      __vue_script__$q,
      __vue_scope_id__$q,
      __vue_is_functional_template__$q,
      __vue_module_identifier__$q,
      false,
      createInjector,
      undefined,
      undefined
    );

  function decoration12 (Vue) {
    Vue.component(__vue_component__$q.name, __vue_component__$q);
  }

  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }

  var classCallCheck = _classCallCheck;

  function _defineProperty(obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }

    return obj;
  }

  var defineProperty = _defineProperty;

  var bezierCurveToPolyline_1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.bezierCurveToPolyline = bezierCurveToPolyline;
  exports.getBezierCurveLength = getBezierCurveLength;
  exports["default"] = void 0;

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);

  var sqrt = Math.sqrt,
      pow = Math.pow,
      ceil = Math.ceil,
      abs = Math.abs; // Initialize the number of points per curve

  var defaultSegmentPointsNum = 50;
  /**
   * @example data structure of bezierCurve
   * bezierCurve = [
   *  // Starting point of the curve
   *  [10, 10],
   *  // BezierCurve segment data (controlPoint1, controlPoint2, endPoint)
   *  [
   *    [20, 20], [40, 20], [50, 10]
   *  ],
   *  ...
   * ]
   */

  /**
   * @description               Abstract the curve as a polyline consisting of N points
   * @param {Array} bezierCurve bezierCurve data
   * @param {Number} precision  calculation accuracy. Recommended for 1-20. Default = 5
   * @return {Object}           Calculation results and related data
   * @return {Array}            Option.segmentPoints Point data that constitutes a polyline after calculation
   * @return {Number}           Option.cycles Number of iterations
   * @return {Number}           Option.rounds The number of recursions for the last iteration
   */

  function abstractBezierCurveToPolyline(bezierCurve) {
    var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
    var segmentsNum = bezierCurve.length - 1;
    var startPoint = bezierCurve[0];
    var endPoint = bezierCurve[segmentsNum][2];
    var segments = bezierCurve.slice(1);
    var getSegmentTPointFuns = segments.map(function (seg, i) {
      var beginPoint = i === 0 ? startPoint : segments[i - 1][2];
      return createGetBezierCurveTPointFun.apply(void 0, [beginPoint].concat((0, _toConsumableArray2["default"])(seg)));
    }); // Initialize the curve to a polyline

    var segmentPointsNum = new Array(segmentsNum).fill(defaultSegmentPointsNum);
    var segmentPoints = getSegmentPointsByNum(getSegmentTPointFuns, segmentPointsNum); // Calculate uniformly distributed points by iteratively

    var result = calcUniformPointsByIteration(segmentPoints, getSegmentTPointFuns, segments, precision);
    result.segmentPoints.push(endPoint);
    return result;
  }
  /**
   * @description  Generate a method for obtaining corresponding point by t according to curve data
   * @param {Array} beginPoint    BezierCurve begin point. [x, y]
   * @param {Array} controlPoint1 BezierCurve controlPoint1. [x, y]
   * @param {Array} controlPoint2 BezierCurve controlPoint2. [x, y]
   * @param {Array} endPoint      BezierCurve end point. [x, y]
   * @return {Function} Expected function
   */


  function createGetBezierCurveTPointFun(beginPoint, controlPoint1, controlPoint2, endPoint) {
    return function (t) {
      var tSubed1 = 1 - t;
      var tSubed1Pow3 = pow(tSubed1, 3);
      var tSubed1Pow2 = pow(tSubed1, 2);
      var tPow3 = pow(t, 3);
      var tPow2 = pow(t, 2);
      return [beginPoint[0] * tSubed1Pow3 + 3 * controlPoint1[0] * t * tSubed1Pow2 + 3 * controlPoint2[0] * tPow2 * tSubed1 + endPoint[0] * tPow3, beginPoint[1] * tSubed1Pow3 + 3 * controlPoint1[1] * t * tSubed1Pow2 + 3 * controlPoint2[1] * tPow2 * tSubed1 + endPoint[1] * tPow3];
    };
  }
  /**
   * @description Get the distance between two points
   * @param {Array} point1 BezierCurve begin point. [x, y]
   * @param {Array} point2 BezierCurve controlPoint1. [x, y]
   * @return {Number} Expected distance
   */


  function getTwoPointDistance(_ref, _ref2) {
    var _ref3 = (0, _slicedToArray2["default"])(_ref, 2),
        ax = _ref3[0],
        ay = _ref3[1];

    var _ref4 = (0, _slicedToArray2["default"])(_ref2, 2),
        bx = _ref4[0],
        by = _ref4[1];

    return sqrt(pow(ax - bx, 2) + pow(ay - by, 2));
  }
  /**
   * @description Get the sum of the array of numbers
   * @param {Array} nums An array of numbers
   * @return {Number} Expected sum
   */


  function getNumsSum(nums) {
    return nums.reduce(function (sum, num) {
      return sum + num;
    }, 0);
  }
  /**
   * @description Get the distance of multiple sets of points
   * @param {Array} segmentPoints Multiple sets of point data
   * @return {Array} Distance of multiple sets of point data
   */


  function getSegmentPointsDistance(segmentPoints) {
    return segmentPoints.map(function (points, i) {
      return new Array(points.length - 1).fill(0).map(function (temp, j) {
        return getTwoPointDistance(points[j], points[j + 1]);
      });
    });
  }
  /**
   * @description Get the distance of multiple sets of points
   * @param {Array} segmentPoints Multiple sets of point data
   * @return {Array} Distance of multiple sets of point data
   */


  function getSegmentPointsByNum(getSegmentTPointFuns, segmentPointsNum) {
    return getSegmentTPointFuns.map(function (getSegmentTPointFun, i) {
      var tGap = 1 / segmentPointsNum[i];
      return new Array(segmentPointsNum[i]).fill('').map(function (foo, j) {
        return getSegmentTPointFun(j * tGap);
      });
    });
  }
  /**
   * @description Get the sum of deviations between line segment and the average length
   * @param {Array} segmentPointsDistance Segment length of polyline
   * @param {Number} avgLength            Average length of the line segment
   * @return {Number} Deviations
   */


  function getAllDeviations(segmentPointsDistance, avgLength) {
    return segmentPointsDistance.map(function (seg) {
      return seg.map(function (s) {
        return abs(s - avgLength);
      });
    }).map(function (seg) {
      return getNumsSum(seg);
    }).reduce(function (total, v) {
      return total + v;
    }, 0);
  }
  /**
   * @description Calculate uniformly distributed points by iteratively
   * @param {Array} segmentPoints        Multiple setd of points that make up a polyline
   * @param {Array} getSegmentTPointFuns Functions of get a point on the curve with t
   * @param {Array} segments             BezierCurve data
   * @param {Number} precision           Calculation accuracy
   * @return {Object} Calculation results and related data
   * @return {Array}  Option.segmentPoints Point data that constitutes a polyline after calculation
   * @return {Number} Option.cycles Number of iterations
   * @return {Number} Option.rounds The number of recursions for the last iteration
   */


  function calcUniformPointsByIteration(segmentPoints, getSegmentTPointFuns, segments, precision) {
    // The number of loops for the current iteration
    var rounds = 4; // Number of iterations

    var cycles = 1;

    var _loop = function _loop() {
      // Recalculate the number of points per curve based on the last iteration data
      var totalPointsNum = segmentPoints.reduce(function (total, seg) {
        return total + seg.length;
      }, 0); // Add last points of segment to calc exact segment length

      segmentPoints.forEach(function (seg, i) {
        return seg.push(segments[i][2]);
      });
      var segmentPointsDistance = getSegmentPointsDistance(segmentPoints);
      var lineSegmentNum = segmentPointsDistance.reduce(function (total, seg) {
        return total + seg.length;
      }, 0);
      var segmentlength = segmentPointsDistance.map(function (seg) {
        return getNumsSum(seg);
      });
      var totalLength = getNumsSum(segmentlength);
      var avgLength = totalLength / lineSegmentNum; // Check if precision is reached

      var allDeviations = getAllDeviations(segmentPointsDistance, avgLength);
      if (allDeviations <= precision) return "break";
      totalPointsNum = ceil(avgLength / precision * totalPointsNum * 1.1);
      var segmentPointsNum = segmentlength.map(function (length) {
        return ceil(length / totalLength * totalPointsNum);
      }); // Calculate the points after redistribution

      segmentPoints = getSegmentPointsByNum(getSegmentTPointFuns, segmentPointsNum);
      totalPointsNum = segmentPoints.reduce(function (total, seg) {
        return total + seg.length;
      }, 0);
      var segmentPointsForLength = JSON.parse(JSON.stringify(segmentPoints));
      segmentPointsForLength.forEach(function (seg, i) {
        return seg.push(segments[i][2]);
      });
      segmentPointsDistance = getSegmentPointsDistance(segmentPointsForLength);
      lineSegmentNum = segmentPointsDistance.reduce(function (total, seg) {
        return total + seg.length;
      }, 0);
      segmentlength = segmentPointsDistance.map(function (seg) {
        return getNumsSum(seg);
      });
      totalLength = getNumsSum(segmentlength);
      avgLength = totalLength / lineSegmentNum;
      var stepSize = 1 / totalPointsNum / 10; // Recursively for each segment of the polyline

      getSegmentTPointFuns.forEach(function (getSegmentTPointFun, i) {
        var currentSegmentPointsNum = segmentPointsNum[i];
        var t = new Array(currentSegmentPointsNum).fill('').map(function (foo, j) {
          return j / segmentPointsNum[i];
        }); // Repeated recursive offset

        for (var r = 0; r < rounds; r++) {
          var distance = getSegmentPointsDistance([segmentPoints[i]])[0];
          var deviations = distance.map(function (d) {
            return d - avgLength;
          });
          var offset = 0;

          for (var j = 0; j < currentSegmentPointsNum; j++) {
            if (j === 0) return;
            offset += deviations[j - 1];
            t[j] -= stepSize * offset;
            if (t[j] > 1) t[j] = 1;
            if (t[j] < 0) t[j] = 0;
            segmentPoints[i][j] = getSegmentTPointFun(t[j]);
          }
        }
      });
      rounds *= 4;
      cycles++;
    };

    do {
      var _ret = _loop();

      if (_ret === "break") break;
    } while (rounds <= 1025);

    segmentPoints = segmentPoints.reduce(function (all, seg) {
      return all.concat(seg);
    }, []);
    return {
      segmentPoints: segmentPoints,
      cycles: cycles,
      rounds: rounds
    };
  }
  /**
   * @description Get the polyline corresponding to the Bezier curve
   * @param {Array} bezierCurve BezierCurve data
   * @param {Number} precision  Calculation accuracy. Recommended for 1-20. Default = 5
   * @return {Array|Boolean} Point data that constitutes a polyline after calculation (Invalid input will return false)
   */


  function bezierCurveToPolyline(bezierCurve) {
    var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;

    if (!bezierCurve) {
      console.error('bezierCurveToPolyline: Missing parameters!');
      return false;
    }

    if (!(bezierCurve instanceof Array)) {
      console.error('bezierCurveToPolyline: Parameter bezierCurve must be an array!');
      return false;
    }

    if (typeof precision !== 'number') {
      console.error('bezierCurveToPolyline: Parameter precision must be a number!');
      return false;
    }

    var _abstractBezierCurveT = abstractBezierCurveToPolyline(bezierCurve, precision),
        segmentPoints = _abstractBezierCurveT.segmentPoints;

    return segmentPoints;
  }
  /**
   * @description Get the bezier curve length
   * @param {Array} bezierCurve bezierCurve data
   * @param {Number} precision  calculation accuracy. Recommended for 5-10. Default = 5
   * @return {Number|Boolean} BezierCurve length (Invalid input will return false)
   */


  function getBezierCurveLength(bezierCurve) {
    var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;

    if (!bezierCurve) {
      console.error('getBezierCurveLength: Missing parameters!');
      return false;
    }

    if (!(bezierCurve instanceof Array)) {
      console.error('getBezierCurveLength: Parameter bezierCurve must be an array!');
      return false;
    }

    if (typeof precision !== 'number') {
      console.error('getBezierCurveLength: Parameter precision must be a number!');
      return false;
    }

    var _abstractBezierCurveT2 = abstractBezierCurveToPolyline(bezierCurve, precision),
        segmentPoints = _abstractBezierCurveT2.segmentPoints; // Calculate the total length of the points that make up the polyline


    var pointsDistance = getSegmentPointsDistance([segmentPoints])[0];
    var length = getNumsSum(pointsDistance);
    return length;
  }

  var _default = bezierCurveToPolyline;
  exports["default"] = _default;
  });

  unwrapExports(bezierCurveToPolyline_1);
  var bezierCurveToPolyline_2 = bezierCurveToPolyline_1.bezierCurveToPolyline;
  var bezierCurveToPolyline_3 = bezierCurveToPolyline_1.getBezierCurveLength;

  var polylineToBezierCurve_1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports["default"] = void 0;

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);

  /**
   * @description Abstract the polyline formed by N points into a set of bezier curve
   * @param {Array} polyline A set of points that make up a polyline
   * @param {Boolean} close  Closed curve
   * @param {Number} offsetA Smoothness
   * @param {Number} offsetB Smoothness
   * @return {Array|Boolean} A set of bezier curve (Invalid input will return false)
   */
  function polylineToBezierCurve(polyline) {
    var close = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    var offsetA = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.25;
    var offsetB = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.25;

    if (!(polyline instanceof Array)) {
      console.error('polylineToBezierCurve: Parameter polyline must be an array!');
      return false;
    }

    if (polyline.length <= 2) {
      console.error('polylineToBezierCurve: Converting to a curve requires at least 3 points!');
      return false;
    }

    var startPoint = polyline[0];
    var bezierCurveLineNum = polyline.length - 1;
    var bezierCurvePoints = new Array(bezierCurveLineNum).fill(0).map(function (foo, i) {
      return [].concat((0, _toConsumableArray2["default"])(getBezierCurveLineControlPoints(polyline, i, close, offsetA, offsetB)), [polyline[i + 1]]);
    });
    if (close) closeBezierCurve(bezierCurvePoints, startPoint);
    bezierCurvePoints.unshift(polyline[0]);
    return bezierCurvePoints;
  }
  /**
   * @description Get the control points of the Bezier curve
   * @param {Array} polyline A set of points that make up a polyline
   * @param {Number} index   The index of which get controls points's point in polyline
   * @param {Boolean} close  Closed curve
   * @param {Number} offsetA Smoothness
   * @param {Number} offsetB Smoothness
   * @return {Array} Control points
   */


  function getBezierCurveLineControlPoints(polyline, index) {
    var close = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
    var offsetA = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.25;
    var offsetB = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0.25;
    var pointNum = polyline.length;
    if (pointNum < 3 || index >= pointNum) return;
    var beforePointIndex = index - 1;
    if (beforePointIndex < 0) beforePointIndex = close ? pointNum + beforePointIndex : 0;
    var afterPointIndex = index + 1;
    if (afterPointIndex >= pointNum) afterPointIndex = close ? afterPointIndex - pointNum : pointNum - 1;
    var afterNextPointIndex = index + 2;
    if (afterNextPointIndex >= pointNum) afterNextPointIndex = close ? afterNextPointIndex - pointNum : pointNum - 1;
    var pointBefore = polyline[beforePointIndex];
    var pointMiddle = polyline[index];
    var pointAfter = polyline[afterPointIndex];
    var pointAfterNext = polyline[afterNextPointIndex];
    return [[pointMiddle[0] + offsetA * (pointAfter[0] - pointBefore[0]), pointMiddle[1] + offsetA * (pointAfter[1] - pointBefore[1])], [pointAfter[0] - offsetB * (pointAfterNext[0] - pointMiddle[0]), pointAfter[1] - offsetB * (pointAfterNext[1] - pointMiddle[1])]];
  }
  /**
   * @description Get the last curve of the closure
   * @param {Array} bezierCurve A set of sub-curve
   * @param {Array} startPoint  Start point
   * @return {Array} The last curve for closure
   */


  function closeBezierCurve(bezierCurve, startPoint) {
    var firstSubCurve = bezierCurve[0];
    var lastSubCurve = bezierCurve.slice(-1)[0];
    bezierCurve.push([getSymmetryPoint(lastSubCurve[1], lastSubCurve[2]), getSymmetryPoint(firstSubCurve[0], startPoint), startPoint]);
    return bezierCurve;
  }
  /**
   * @description Get the symmetry point
   * @param {Array} point       Symmetric point
   * @param {Array} centerPoint Symmetric center
   * @return {Array} Symmetric point
   */


  function getSymmetryPoint(point, centerPoint) {
    var _point = (0, _slicedToArray2["default"])(point, 2),
        px = _point[0],
        py = _point[1];

    var _centerPoint = (0, _slicedToArray2["default"])(centerPoint, 2),
        cx = _centerPoint[0],
        cy = _centerPoint[1];

    var minusX = cx - px;
    var minusY = cy - py;
    return [cx + minusX, cy + minusY];
  }

  var _default = polylineToBezierCurve;
  exports["default"] = _default;
  });

  unwrapExports(polylineToBezierCurve_1);

  var lib$1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  Object.defineProperty(exports, "bezierCurveToPolyline", {
    enumerable: true,
    get: function get() {
      return bezierCurveToPolyline_1.bezierCurveToPolyline;
    }
  });
  Object.defineProperty(exports, "getBezierCurveLength", {
    enumerable: true,
    get: function get() {
      return bezierCurveToPolyline_1.getBezierCurveLength;
    }
  });
  Object.defineProperty(exports, "polylineToBezierCurve", {
    enumerable: true,
    get: function get() {
      return _polylineToBezierCurve["default"];
    }
  });
  exports["default"] = void 0;



  var _polylineToBezierCurve = interopRequireDefault(polylineToBezierCurve_1);

  var _default = {
    bezierCurveToPolyline: bezierCurveToPolyline_1.bezierCurveToPolyline,
    getBezierCurveLength: bezierCurveToPolyline_1.getBezierCurveLength,
    polylineToBezierCurve: _polylineToBezierCurve["default"]
  };
  exports["default"] = _default;
  });

  unwrapExports(lib$1);

  var canvas = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.drawPolylinePath = drawPolylinePath;
  exports.drawBezierCurvePath = drawBezierCurvePath;
  exports["default"] = void 0;

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);

  /**
   * @description Draw a polyline path
   * @param {Object} ctx        Canvas 2d context
   * @param {Array} points      The points that makes up a polyline
   * @param {Boolean} beginPath Whether to execute beginPath
   * @param {Boolean} closePath Whether to execute closePath
   * @return {Undefined} Void
   */
  function drawPolylinePath(ctx, points) {
    var beginPath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
    var closePath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
    if (!ctx || points.length < 2) return false;
    if (beginPath) ctx.beginPath();
    points.forEach(function (point, i) {
      return point && (i === 0 ? ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(point)) : ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(point)));
    });
    if (closePath) ctx.closePath();
  }
  /**
   * @description Draw a bezier curve path
   * @param {Object} ctx        Canvas 2d context
   * @param {Array} points      The points that makes up a bezier curve
   * @param {Array} moveTo      The point need to excute moveTo
   * @param {Boolean} beginPath Whether to execute beginPath
   * @param {Boolean} closePath Whether to execute closePath
   * @return {Undefined} Void
   */


  function drawBezierCurvePath(ctx, points) {
    var moveTo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
    var beginPath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
    var closePath = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
    if (!ctx || !points) return false;
    if (beginPath) ctx.beginPath();
    if (moveTo) ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(moveTo));
    points.forEach(function (item) {
      return item && ctx.bezierCurveTo.apply(ctx, (0, _toConsumableArray2["default"])(item[0]).concat((0, _toConsumableArray2["default"])(item[1]), (0, _toConsumableArray2["default"])(item[2])));
    });
    if (closePath) ctx.closePath();
  }

  var _default = {
    drawPolylinePath: drawPolylinePath,
    drawBezierCurvePath: drawBezierCurvePath
  };
  exports["default"] = _default;
  });

  unwrapExports(canvas);
  var canvas_1 = canvas.drawPolylinePath;
  var canvas_2 = canvas.drawBezierCurvePath;

  var graphs_1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.extendNewGraph = extendNewGraph;
  exports["default"] = exports.text = exports.bezierCurve = exports.smoothline = exports.polyline = exports.regPolygon = exports.sector = exports.arc = exports.ring = exports.rect = exports.ellipse = exports.circle = void 0;

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _bezierCurve2 = interopRequireDefault(lib$1);





  var polylineToBezierCurve = _bezierCurve2["default"].polylineToBezierCurve,
      bezierCurveToPolyline = _bezierCurve2["default"].bezierCurveToPolyline;
  var circle = {
    shape: {
      rx: 0,
      ry: 0,
      r: 0
    },
    validator: function validator(_ref) {
      var shape = _ref.shape;
      var rx = shape.rx,
          ry = shape.ry,
          r = shape.r;

      if (typeof rx !== 'number' || typeof ry !== 'number' || typeof r !== 'number') {
        console.error('Circle shape configuration is abnormal!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref2, _ref3) {
      var ctx = _ref2.ctx;
      var shape = _ref3.shape;
      ctx.beginPath();
      var rx = shape.rx,
          ry = shape.ry,
          r = shape.r;
      ctx.arc(rx, ry, r > 0 ? r : 0.01, 0, Math.PI * 2);
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
    },
    hoverCheck: function hoverCheck(position, _ref4) {
      var shape = _ref4.shape;
      var rx = shape.rx,
          ry = shape.ry,
          r = shape.r;
      return (0, util.checkPointIsInCircle)(position, rx, ry, r);
    },
    setGraphCenter: function setGraphCenter(e, _ref5) {
      var shape = _ref5.shape,
          style = _ref5.style;
      var rx = shape.rx,
          ry = shape.ry;
      style.graphCenter = [rx, ry];
    },
    move: function move(_ref6, _ref7) {
      var movementX = _ref6.movementX,
          movementY = _ref6.movementY;
      var shape = _ref7.shape;
      this.attr('shape', {
        rx: shape.rx + movementX,
        ry: shape.ry + movementY
      });
    }
  };
  exports.circle = circle;
  var ellipse = {
    shape: {
      rx: 0,
      ry: 0,
      hr: 0,
      vr: 0
    },
    validator: function validator(_ref8) {
      var shape = _ref8.shape;
      var rx = shape.rx,
          ry = shape.ry,
          hr = shape.hr,
          vr = shape.vr;

      if (typeof rx !== 'number' || typeof ry !== 'number' || typeof hr !== 'number' || typeof vr !== 'number') {
        console.error('Ellipse shape configuration is abnormal!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref9, _ref10) {
      var ctx = _ref9.ctx;
      var shape = _ref10.shape;
      ctx.beginPath();
      var rx = shape.rx,
          ry = shape.ry,
          hr = shape.hr,
          vr = shape.vr;
      ctx.ellipse(rx, ry, hr > 0 ? hr : 0.01, vr > 0 ? vr : 0.01, 0, 0, Math.PI * 2);
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
    },
    hoverCheck: function hoverCheck(position, _ref11) {
      var shape = _ref11.shape;
      var rx = shape.rx,
          ry = shape.ry,
          hr = shape.hr,
          vr = shape.vr;
      var a = Math.max(hr, vr);
      var b = Math.min(hr, vr);
      var c = Math.sqrt(a * a - b * b);
      var leftFocusPoint = [rx - c, ry];
      var rightFocusPoint = [rx + c, ry];
      var distance = (0, util.getTwoPointDistance)(position, leftFocusPoint) + (0, util.getTwoPointDistance)(position, rightFocusPoint);
      return distance <= 2 * a;
    },
    setGraphCenter: function setGraphCenter(e, _ref12) {
      var shape = _ref12.shape,
          style = _ref12.style;
      var rx = shape.rx,
          ry = shape.ry;
      style.graphCenter = [rx, ry];
    },
    move: function move(_ref13, _ref14) {
      var movementX = _ref13.movementX,
          movementY = _ref13.movementY;
      var shape = _ref14.shape;
      this.attr('shape', {
        rx: shape.rx + movementX,
        ry: shape.ry + movementY
      });
    }
  };
  exports.ellipse = ellipse;
  var rect = {
    shape: {
      x: 0,
      y: 0,
      w: 0,
      h: 0
    },
    validator: function validator(_ref15) {
      var shape = _ref15.shape;
      var x = shape.x,
          y = shape.y,
          w = shape.w,
          h = shape.h;

      if (typeof x !== 'number' || typeof y !== 'number' || typeof w !== 'number' || typeof h !== 'number') {
        console.error('Rect shape configuration is abnormal!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref16, _ref17) {
      var ctx = _ref16.ctx;
      var shape = _ref17.shape;
      ctx.beginPath();
      var x = shape.x,
          y = shape.y,
          w = shape.w,
          h = shape.h;
      ctx.rect(x, y, w, h);
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
    },
    hoverCheck: function hoverCheck(position, _ref18) {
      var shape = _ref18.shape;
      var x = shape.x,
          y = shape.y,
          w = shape.w,
          h = shape.h;
      return (0, util.checkPointIsInRect)(position, x, y, w, h);
    },
    setGraphCenter: function setGraphCenter(e, _ref19) {
      var shape = _ref19.shape,
          style = _ref19.style;
      var x = shape.x,
          y = shape.y,
          w = shape.w,
          h = shape.h;
      style.graphCenter = [x + w / 2, y + h / 2];
    },
    move: function move(_ref20, _ref21) {
      var movementX = _ref20.movementX,
          movementY = _ref20.movementY;
      var shape = _ref21.shape;
      this.attr('shape', {
        x: shape.x + movementX,
        y: shape.y + movementY
      });
    }
  };
  exports.rect = rect;
  var ring = {
    shape: {
      rx: 0,
      ry: 0,
      r: 0
    },
    validator: function validator(_ref22) {
      var shape = _ref22.shape;
      var rx = shape.rx,
          ry = shape.ry,
          r = shape.r;

      if (typeof rx !== 'number' || typeof ry !== 'number' || typeof r !== 'number') {
        console.error('Ring shape configuration is abnormal!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref23, _ref24) {
      var ctx = _ref23.ctx;
      var shape = _ref24.shape;
      ctx.beginPath();
      var rx = shape.rx,
          ry = shape.ry,
          r = shape.r;
      ctx.arc(rx, ry, r > 0 ? r : 0.01, 0, Math.PI * 2);
      ctx.stroke();
      ctx.closePath();
    },
    hoverCheck: function hoverCheck(position, _ref25) {
      var shape = _ref25.shape,
          style = _ref25.style;
      var rx = shape.rx,
          ry = shape.ry,
          r = shape.r;
      var lineWidth = style.lineWidth;
      var halfLineWidth = lineWidth / 2;
      var minDistance = r - halfLineWidth;
      var maxDistance = r + halfLineWidth;
      var distance = (0, util.getTwoPointDistance)(position, [rx, ry]);
      return distance >= minDistance && distance <= maxDistance;
    },
    setGraphCenter: function setGraphCenter(e, _ref26) {
      var shape = _ref26.shape,
          style = _ref26.style;
      var rx = shape.rx,
          ry = shape.ry;
      style.graphCenter = [rx, ry];
    },
    move: function move(_ref27, _ref28) {
      var movementX = _ref27.movementX,
          movementY = _ref27.movementY;
      var shape = _ref28.shape;
      this.attr('shape', {
        rx: shape.rx + movementX,
        ry: shape.ry + movementY
      });
    }
  };
  exports.ring = ring;
  var arc = {
    shape: {
      rx: 0,
      ry: 0,
      r: 0,
      startAngle: 0,
      endAngle: 0,
      clockWise: true
    },
    validator: function validator(_ref29) {
      var shape = _ref29.shape;
      var keys = ['rx', 'ry', 'r', 'startAngle', 'endAngle'];

      if (keys.find(function (key) {
        return typeof shape[key] !== 'number';
      })) {
        console.error('Arc shape configuration is abnormal!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref30, _ref31) {
      var ctx = _ref30.ctx;
      var shape = _ref31.shape;
      ctx.beginPath();
      var rx = shape.rx,
          ry = shape.ry,
          r = shape.r,
          startAngle = shape.startAngle,
          endAngle = shape.endAngle,
          clockWise = shape.clockWise;
      ctx.arc(rx, ry, r > 0 ? r : 0.001, startAngle, endAngle, !clockWise);
      ctx.stroke();
      ctx.closePath();
    },
    hoverCheck: function hoverCheck(position, _ref32) {
      var shape = _ref32.shape,
          style = _ref32.style;
      var rx = shape.rx,
          ry = shape.ry,
          r = shape.r,
          startAngle = shape.startAngle,
          endAngle = shape.endAngle,
          clockWise = shape.clockWise;
      var lineWidth = style.lineWidth;
      var halfLineWidth = lineWidth / 2;
      var insideRadius = r - halfLineWidth;
      var outsideRadius = r + halfLineWidth;
      return !(0, util.checkPointIsInSector)(position, rx, ry, insideRadius, startAngle, endAngle, clockWise) && (0, util.checkPointIsInSector)(position, rx, ry, outsideRadius, startAngle, endAngle, clockWise);
    },
    setGraphCenter: function setGraphCenter(e, _ref33) {
      var shape = _ref33.shape,
          style = _ref33.style;
      var rx = shape.rx,
          ry = shape.ry;
      style.graphCenter = [rx, ry];
    },
    move: function move(_ref34, _ref35) {
      var movementX = _ref34.movementX,
          movementY = _ref34.movementY;
      var shape = _ref35.shape;
      this.attr('shape', {
        rx: shape.rx + movementX,
        ry: shape.ry + movementY
      });
    }
  };
  exports.arc = arc;
  var sector = {
    shape: {
      rx: 0,
      ry: 0,
      r: 0,
      startAngle: 0,
      endAngle: 0,
      clockWise: true
    },
    validator: function validator(_ref36) {
      var shape = _ref36.shape;
      var keys = ['rx', 'ry', 'r', 'startAngle', 'endAngle'];

      if (keys.find(function (key) {
        return typeof shape[key] !== 'number';
      })) {
        console.error('Sector shape configuration is abnormal!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref37, _ref38) {
      var ctx = _ref37.ctx;
      var shape = _ref38.shape;
      ctx.beginPath();
      var rx = shape.rx,
          ry = shape.ry,
          r = shape.r,
          startAngle = shape.startAngle,
          endAngle = shape.endAngle,
          clockWise = shape.clockWise;
      ctx.arc(rx, ry, r > 0 ? r : 0.01, startAngle, endAngle, !clockWise);
      ctx.lineTo(rx, ry);
      ctx.closePath();
      ctx.stroke();
      ctx.fill();
    },
    hoverCheck: function hoverCheck(position, _ref39) {
      var shape = _ref39.shape;
      var rx = shape.rx,
          ry = shape.ry,
          r = shape.r,
          startAngle = shape.startAngle,
          endAngle = shape.endAngle,
          clockWise = shape.clockWise;
      return (0, util.checkPointIsInSector)(position, rx, ry, r, startAngle, endAngle, clockWise);
    },
    setGraphCenter: function setGraphCenter(e, _ref40) {
      var shape = _ref40.shape,
          style = _ref40.style;
      var rx = shape.rx,
          ry = shape.ry;
      style.graphCenter = [rx, ry];
    },
    move: function move(_ref41, _ref42) {
      var movementX = _ref41.movementX,
          movementY = _ref41.movementY;
      var shape = _ref42.shape;
      var rx = shape.rx,
          ry = shape.ry;
      this.attr('shape', {
        rx: rx + movementX,
        ry: ry + movementY
      });
    }
  };
  exports.sector = sector;
  var regPolygon = {
    shape: {
      rx: 0,
      ry: 0,
      r: 0,
      side: 0
    },
    validator: function validator(_ref43) {
      var shape = _ref43.shape;
      var side = shape.side;
      var keys = ['rx', 'ry', 'r', 'side'];

      if (keys.find(function (key) {
        return typeof shape[key] !== 'number';
      })) {
        console.error('RegPolygon shape configuration is abnormal!');
        return false;
      }

      if (side < 3) {
        console.error('RegPolygon at least trigon!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref44, _ref45) {
      var ctx = _ref44.ctx;
      var shape = _ref45.shape,
          cache = _ref45.cache;
      ctx.beginPath();
      var rx = shape.rx,
          ry = shape.ry,
          r = shape.r,
          side = shape.side;

      if (!cache.points || cache.rx !== rx || cache.ry !== ry || cache.r !== r || cache.side !== side) {
        var _points = (0, util.getRegularPolygonPoints)(rx, ry, r, side);

        Object.assign(cache, {
          points: _points,
          rx: rx,
          ry: ry,
          r: r,
          side: side
        });
      }

      var points = cache.points;
      (0, canvas.drawPolylinePath)(ctx, points);
      ctx.closePath();
      ctx.stroke();
      ctx.fill();
    },
    hoverCheck: function hoverCheck(position, _ref46) {
      var cache = _ref46.cache;
      var points = cache.points;
      return (0, util.checkPointIsInPolygon)(position, points);
    },
    setGraphCenter: function setGraphCenter(e, _ref47) {
      var shape = _ref47.shape,
          style = _ref47.style;
      var rx = shape.rx,
          ry = shape.ry;
      style.graphCenter = [rx, ry];
    },
    move: function move(_ref48, _ref49) {
      var movementX = _ref48.movementX,
          movementY = _ref48.movementY;
      var shape = _ref49.shape,
          cache = _ref49.cache;
      var rx = shape.rx,
          ry = shape.ry;
      cache.rx += movementX;
      cache.ry += movementY;
      this.attr('shape', {
        rx: rx + movementX,
        ry: ry + movementY
      });
      cache.points = cache.points.map(function (_ref50) {
        var _ref51 = (0, _slicedToArray2["default"])(_ref50, 2),
            x = _ref51[0],
            y = _ref51[1];

        return [x + movementX, y + movementY];
      });
    }
  };
  exports.regPolygon = regPolygon;
  var polyline = {
    shape: {
      points: [],
      close: false
    },
    validator: function validator(_ref52) {
      var shape = _ref52.shape;
      var points = shape.points;

      if (!(points instanceof Array)) {
        console.error('Polyline points should be an array!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref53, _ref54) {
      var ctx = _ref53.ctx;
      var shape = _ref54.shape,
          lineWidth = _ref54.style.lineWidth;
      ctx.beginPath();
      var points = shape.points,
          close = shape.close;
      if (lineWidth === 1) points = (0, util.eliminateBlur)(points);
      (0, canvas.drawPolylinePath)(ctx, points);

      if (close) {
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
      } else {
        ctx.stroke();
      }
    },
    hoverCheck: function hoverCheck(position, _ref55) {
      var shape = _ref55.shape,
          style = _ref55.style;
      var points = shape.points,
          close = shape.close;
      var lineWidth = style.lineWidth;

      if (close) {
        return (0, util.checkPointIsInPolygon)(position, points);
      } else {
        return (0, util.checkPointIsNearPolyline)(position, points, lineWidth);
      }
    },
    setGraphCenter: function setGraphCenter(e, _ref56) {
      var shape = _ref56.shape,
          style = _ref56.style;
      var points = shape.points;
      style.graphCenter = points[0];
    },
    move: function move(_ref57, _ref58) {
      var movementX = _ref57.movementX,
          movementY = _ref57.movementY;
      var shape = _ref58.shape;
      var points = shape.points;
      var moveAfterPoints = points.map(function (_ref59) {
        var _ref60 = (0, _slicedToArray2["default"])(_ref59, 2),
            x = _ref60[0],
            y = _ref60[1];

        return [x + movementX, y + movementY];
      });
      this.attr('shape', {
        points: moveAfterPoints
      });
    }
  };
  exports.polyline = polyline;
  var smoothline = {
    shape: {
      points: [],
      close: false
    },
    validator: function validator(_ref61) {
      var shape = _ref61.shape;
      var points = shape.points;

      if (!(points instanceof Array)) {
        console.error('Smoothline points should be an array!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref62, _ref63) {
      var ctx = _ref62.ctx;
      var shape = _ref63.shape,
          cache = _ref63.cache;
      var points = shape.points,
          close = shape.close;

      if (!cache.points || cache.points.toString() !== points.toString()) {
        var _bezierCurve = polylineToBezierCurve(points, close);

        var hoverPoints = bezierCurveToPolyline(_bezierCurve);
        Object.assign(cache, {
          points: (0, util.deepClone)(points, true),
          bezierCurve: _bezierCurve,
          hoverPoints: hoverPoints
        });
      }

      var bezierCurve = cache.bezierCurve;
      ctx.beginPath();
      (0, canvas.drawBezierCurvePath)(ctx, bezierCurve.slice(1), bezierCurve[0]);

      if (close) {
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
      } else {
        ctx.stroke();
      }
    },
    hoverCheck: function hoverCheck(position, _ref64) {
      var cache = _ref64.cache,
          shape = _ref64.shape,
          style = _ref64.style;
      var hoverPoints = cache.hoverPoints;
      var close = shape.close;
      var lineWidth = style.lineWidth;

      if (close) {
        return (0, util.checkPointIsInPolygon)(position, hoverPoints);
      } else {
        return (0, util.checkPointIsNearPolyline)(position, hoverPoints, lineWidth);
      }
    },
    setGraphCenter: function setGraphCenter(e, _ref65) {
      var shape = _ref65.shape,
          style = _ref65.style;
      var points = shape.points;
      style.graphCenter = points[0];
    },
    move: function move(_ref66, _ref67) {
      var movementX = _ref66.movementX,
          movementY = _ref66.movementY;
      var shape = _ref67.shape,
          cache = _ref67.cache;
      var points = shape.points;
      var moveAfterPoints = points.map(function (_ref68) {
        var _ref69 = (0, _slicedToArray2["default"])(_ref68, 2),
            x = _ref69[0],
            y = _ref69[1];

        return [x + movementX, y + movementY];
      });
      cache.points = moveAfterPoints;

      var _cache$bezierCurve$ = (0, _slicedToArray2["default"])(cache.bezierCurve[0], 2),
          fx = _cache$bezierCurve$[0],
          fy = _cache$bezierCurve$[1];

      var curves = cache.bezierCurve.slice(1);
      cache.bezierCurve = [[fx + movementX, fy + movementY]].concat((0, _toConsumableArray2["default"])(curves.map(function (curve) {
        return curve.map(function (_ref70) {
          var _ref71 = (0, _slicedToArray2["default"])(_ref70, 2),
              x = _ref71[0],
              y = _ref71[1];

          return [x + movementX, y + movementY];
        });
      })));
      cache.hoverPoints = cache.hoverPoints.map(function (_ref72) {
        var _ref73 = (0, _slicedToArray2["default"])(_ref72, 2),
            x = _ref73[0],
            y = _ref73[1];

        return [x + movementX, y + movementY];
      });
      this.attr('shape', {
        points: moveAfterPoints
      });
    }
  };
  exports.smoothline = smoothline;
  var bezierCurve = {
    shape: {
      points: [],
      close: false
    },
    validator: function validator(_ref74) {
      var shape = _ref74.shape;
      var points = shape.points;

      if (!(points instanceof Array)) {
        console.error('BezierCurve points should be an array!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref75, _ref76) {
      var ctx = _ref75.ctx;
      var shape = _ref76.shape,
          cache = _ref76.cache;
      var points = shape.points,
          close = shape.close;

      if (!cache.points || cache.points.toString() !== points.toString()) {
        var hoverPoints = bezierCurveToPolyline(points, 20);
        Object.assign(cache, {
          points: (0, util.deepClone)(points, true),
          hoverPoints: hoverPoints
        });
      }

      ctx.beginPath();
      (0, canvas.drawBezierCurvePath)(ctx, points.slice(1), points[0]);

      if (close) {
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
      } else {
        ctx.stroke();
      }
    },
    hoverCheck: function hoverCheck(position, _ref77) {
      var cache = _ref77.cache,
          shape = _ref77.shape,
          style = _ref77.style;
      var hoverPoints = cache.hoverPoints;
      var close = shape.close;
      var lineWidth = style.lineWidth;

      if (close) {
        return (0, util.checkPointIsInPolygon)(position, hoverPoints);
      } else {
        return (0, util.checkPointIsNearPolyline)(position, hoverPoints, lineWidth);
      }
    },
    setGraphCenter: function setGraphCenter(e, _ref78) {
      var shape = _ref78.shape,
          style = _ref78.style;
      var points = shape.points;
      style.graphCenter = points[0];
    },
    move: function move(_ref79, _ref80) {
      var movementX = _ref79.movementX,
          movementY = _ref79.movementY;
      var shape = _ref80.shape,
          cache = _ref80.cache;
      var points = shape.points;

      var _points$ = (0, _slicedToArray2["default"])(points[0], 2),
          fx = _points$[0],
          fy = _points$[1];

      var curves = points.slice(1);
      var bezierCurve = [[fx + movementX, fy + movementY]].concat((0, _toConsumableArray2["default"])(curves.map(function (curve) {
        return curve.map(function (_ref81) {
          var _ref82 = (0, _slicedToArray2["default"])(_ref81, 2),
              x = _ref82[0],
              y = _ref82[1];

          return [x + movementX, y + movementY];
        });
      })));
      cache.points = bezierCurve;
      cache.hoverPoints = cache.hoverPoints.map(function (_ref83) {
        var _ref84 = (0, _slicedToArray2["default"])(_ref83, 2),
            x = _ref84[0],
            y = _ref84[1];

        return [x + movementX, y + movementY];
      });
      this.attr('shape', {
        points: bezierCurve
      });
    }
  };
  exports.bezierCurve = bezierCurve;
  var text = {
    shape: {
      content: '',
      position: [],
      maxWidth: undefined,
      rowGap: 0
    },
    validator: function validator(_ref85) {
      var shape = _ref85.shape;
      var content = shape.content,
          position = shape.position,
          rowGap = shape.rowGap;

      if (typeof content !== 'string') {
        console.error('Text content should be a string!');
        return false;
      }

      if (!(position instanceof Array)) {
        console.error('Text position should be an array!');
        return false;
      }

      if (typeof rowGap !== 'number') {
        console.error('Text rowGap should be a number!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref86, _ref87) {
      var ctx = _ref86.ctx;
      var shape = _ref87.shape;
      var content = shape.content,
          position = shape.position,
          maxWidth = shape.maxWidth,
          rowGap = shape.rowGap;
      var textBaseline = ctx.textBaseline,
          font = ctx.font;
      var fontSize = parseInt(font.replace(/\D/g, ''));

      var _position = position,
          _position2 = (0, _slicedToArray2["default"])(_position, 2),
          x = _position2[0],
          y = _position2[1];

      content = content.split('\n');
      var rowNum = content.length;
      var lineHeight = fontSize + rowGap;
      var allHeight = rowNum * lineHeight - rowGap;
      var offset = 0;

      if (textBaseline === 'middle') {
        offset = allHeight / 2;
        y += fontSize / 2;
      }

      if (textBaseline === 'bottom') {
        offset = allHeight;
        y += fontSize;
      }

      position = new Array(rowNum).fill(0).map(function (foo, i) {
        return [x, y + i * lineHeight - offset];
      });
      ctx.beginPath();
      content.forEach(function (text, i) {
        ctx.fillText.apply(ctx, [text].concat((0, _toConsumableArray2["default"])(position[i]), [maxWidth]));
        ctx.strokeText.apply(ctx, [text].concat((0, _toConsumableArray2["default"])(position[i]), [maxWidth]));
      });
      ctx.closePath();
    },
    hoverCheck: function hoverCheck(position, _ref88) {
      var shape = _ref88.shape,
          style = _ref88.style;
      return false;
    },
    setGraphCenter: function setGraphCenter(e, _ref89) {
      var shape = _ref89.shape,
          style = _ref89.style;
      var position = shape.position;
      style.graphCenter = (0, _toConsumableArray2["default"])(position);
    },
    move: function move(_ref90, _ref91) {
      var movementX = _ref90.movementX,
          movementY = _ref90.movementY;
      var shape = _ref91.shape;

      var _shape$position = (0, _slicedToArray2["default"])(shape.position, 2),
          x = _shape$position[0],
          y = _shape$position[1];

      this.attr('shape', {
        position: [x + movementX, y + movementY]
      });
    }
  };
  exports.text = text;
  var graphs = new Map([['circle', circle], ['ellipse', ellipse], ['rect', rect], ['ring', ring], ['arc', arc], ['sector', sector], ['regPolygon', regPolygon], ['polyline', polyline], ['smoothline', smoothline], ['bezierCurve', bezierCurve], ['text', text]]);
  var _default = graphs;
  /**
   * @description Extend new graph
   * @param {String} name   Name of Graph
   * @param {Object} config Configuration of Graph
   * @return {Undefined} Void
   */

  exports["default"] = _default;

  function extendNewGraph(name, config) {
    if (!name || !config) {
      console.error('ExtendNewGraph Missing Parameters!');
      return;
    }

    if (!config.shape) {
      console.error('Required attribute of shape to extendNewGraph!');
      return;
    }

    if (!config.validator) {
      console.error('Required function of validator to extendNewGraph!');
      return;
    }

    if (!config.draw) {
      console.error('Required function of draw to extendNewGraph!');
      return;
    }

    graphs.set(name, config);
  }
  });

  unwrapExports(graphs_1);
  var graphs_2 = graphs_1.extendNewGraph;
  var graphs_3 = graphs_1.text;
  var graphs_4 = graphs_1.bezierCurve;
  var graphs_5 = graphs_1.smoothline;
  var graphs_6 = graphs_1.polyline;
  var graphs_7 = graphs_1.regPolygon;
  var graphs_8 = graphs_1.sector;
  var graphs_9 = graphs_1.arc;
  var graphs_10 = graphs_1.ring;
  var graphs_11 = graphs_1.rect;
  var graphs_12 = graphs_1.ellipse;
  var graphs_13 = graphs_1.circle;

  var runtime_1 = createCommonjsModule(function (module) {
  /**
   * Copyright (c) 2014-present, Facebook, Inc.
   *
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
   */

  var runtime = (function (exports) {

    var Op = Object.prototype;
    var hasOwn = Op.hasOwnProperty;
    var undefined$1; // More compressible than void 0.
    var $Symbol = typeof Symbol === "function" ? Symbol : {};
    var iteratorSymbol = $Symbol.iterator || "@@iterator";
    var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
    var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";

    function wrap(innerFn, outerFn, self, tryLocsList) {
      // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
      var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
      var generator = Object.create(protoGenerator.prototype);
      var context = new Context(tryLocsList || []);

      // The ._invoke method unifies the implementations of the .next,
      // .throw, and .return methods.
      generator._invoke = makeInvokeMethod(innerFn, self, context);

      return generator;
    }
    exports.wrap = wrap;

    // Try/catch helper to minimize deoptimizations. Returns a completion
    // record like context.tryEntries[i].completion. This interface could
    // have been (and was previously) designed to take a closure to be
    // invoked without arguments, but in all the cases we care about we
    // already have an existing method we want to call, so there's no need
    // to create a new function object. We can even get away with assuming
    // the method takes exactly one argument, since that happens to be true
    // in every case, so we don't have to touch the arguments object. The
    // only additional allocation required is the completion record, which
    // has a stable shape and so hopefully should be cheap to allocate.
    function tryCatch(fn, obj, arg) {
      try {
        return { type: "normal", arg: fn.call(obj, arg) };
      } catch (err) {
        return { type: "throw", arg: err };
      }
    }

    var GenStateSuspendedStart = "suspendedStart";
    var GenStateSuspendedYield = "suspendedYield";
    var GenStateExecuting = "executing";
    var GenStateCompleted = "completed";

    // Returning this object from the innerFn has the same effect as
    // breaking out of the dispatch switch statement.
    var ContinueSentinel = {};

    // Dummy constructor functions that we use as the .constructor and
    // .constructor.prototype properties for functions that return Generator
    // objects. For full spec compliance, you may wish to configure your
    // minifier not to mangle the names of these two functions.
    function Generator() {}
    function GeneratorFunction() {}
    function GeneratorFunctionPrototype() {}

    // This is a polyfill for %IteratorPrototype% for environments that
    // don't natively support it.
    var IteratorPrototype = {};
    IteratorPrototype[iteratorSymbol] = function () {
      return this;
    };

    var getProto = Object.getPrototypeOf;
    var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
    if (NativeIteratorPrototype &&
        NativeIteratorPrototype !== Op &&
        hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
      // This environment has a native %IteratorPrototype%; use it instead
      // of the polyfill.
      IteratorPrototype = NativeIteratorPrototype;
    }

    var Gp = GeneratorFunctionPrototype.prototype =
      Generator.prototype = Object.create(IteratorPrototype);
    GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
    GeneratorFunctionPrototype.constructor = GeneratorFunction;
    GeneratorFunctionPrototype[toStringTagSymbol] =
      GeneratorFunction.displayName = "GeneratorFunction";

    // Helper for defining the .next, .throw, and .return methods of the
    // Iterator interface in terms of a single ._invoke method.
    function defineIteratorMethods(prototype) {
      ["next", "throw", "return"].forEach(function(method) {
        prototype[method] = function(arg) {
          return this._invoke(method, arg);
        };
      });
    }

    exports.isGeneratorFunction = function(genFun) {
      var ctor = typeof genFun === "function" && genFun.constructor;
      return ctor
        ? ctor === GeneratorFunction ||
          // For the native GeneratorFunction constructor, the best we can
          // do is to check its .name property.
          (ctor.displayName || ctor.name) === "GeneratorFunction"
        : false;
    };

    exports.mark = function(genFun) {
      if (Object.setPrototypeOf) {
        Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
      } else {
        genFun.__proto__ = GeneratorFunctionPrototype;
        if (!(toStringTagSymbol in genFun)) {
          genFun[toStringTagSymbol] = "GeneratorFunction";
        }
      }
      genFun.prototype = Object.create(Gp);
      return genFun;
    };

    // Within the body of any async function, `await x` is transformed to
    // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
    // `hasOwn.call(value, "__await")` to determine if the yielded value is
    // meant to be awaited.
    exports.awrap = function(arg) {
      return { __await: arg };
    };

    function AsyncIterator(generator, PromiseImpl) {
      function invoke(method, arg, resolve, reject) {
        var record = tryCatch(generator[method], generator, arg);
        if (record.type === "throw") {
          reject(record.arg);
        } else {
          var result = record.arg;
          var value = result.value;
          if (value &&
              typeof value === "object" &&
              hasOwn.call(value, "__await")) {
            return PromiseImpl.resolve(value.__await).then(function(value) {
              invoke("next", value, resolve, reject);
            }, function(err) {
              invoke("throw", err, resolve, reject);
            });
          }

          return PromiseImpl.resolve(value).then(function(unwrapped) {
            // When a yielded Promise is resolved, its final value becomes
            // the .value of the Promise<{value,done}> result for the
            // current iteration.
            result.value = unwrapped;
            resolve(result);
          }, function(error) {
            // If a rejected Promise was yielded, throw the rejection back
            // into the async generator function so it can be handled there.
            return invoke("throw", error, resolve, reject);
          });
        }
      }

      var previousPromise;

      function enqueue(method, arg) {
        function callInvokeWithMethodAndArg() {
          return new PromiseImpl(function(resolve, reject) {
            invoke(method, arg, resolve, reject);
          });
        }

        return previousPromise =
          // If enqueue has been called before, then we want to wait until
          // all previous Promises have been resolved before calling invoke,
          // so that results are always delivered in the correct order. If
          // enqueue has not been called before, then it is important to
          // call invoke immediately, without waiting on a callback to fire,
          // so that the async generator function has the opportunity to do
          // any necessary setup in a predictable way. This predictability
          // is why the Promise constructor synchronously invokes its
          // executor callback, and why async functions synchronously
          // execute code before the first await. Since we implement simple
          // async functions in terms of async generators, it is especially
          // important to get this right, even though it requires care.
          previousPromise ? previousPromise.then(
            callInvokeWithMethodAndArg,
            // Avoid propagating failures to Promises returned by later
            // invocations of the iterator.
            callInvokeWithMethodAndArg
          ) : callInvokeWithMethodAndArg();
      }

      // Define the unified helper method that is used to implement .next,
      // .throw, and .return (see defineIteratorMethods).
      this._invoke = enqueue;
    }

    defineIteratorMethods(AsyncIterator.prototype);
    AsyncIterator.prototype[asyncIteratorSymbol] = function () {
      return this;
    };
    exports.AsyncIterator = AsyncIterator;

    // Note that simple async functions are implemented on top of
    // AsyncIterator objects; they just return a Promise for the value of
    // the final result produced by the iterator.
    exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) {
      if (PromiseImpl === void 0) PromiseImpl = Promise;

      var iter = new AsyncIterator(
        wrap(innerFn, outerFn, self, tryLocsList),
        PromiseImpl
      );

      return exports.isGeneratorFunction(outerFn)
        ? iter // If outerFn is a generator, return the full iterator.
        : iter.next().then(function(result) {
            return result.done ? result.value : iter.next();
          });
    };

    function makeInvokeMethod(innerFn, self, context) {
      var state = GenStateSuspendedStart;

      return function invoke(method, arg) {
        if (state === GenStateExecuting) {
          throw new Error("Generator is already running");
        }

        if (state === GenStateCompleted) {
          if (method === "throw") {
            throw arg;
          }

          // Be forgiving, per 25.3.3.3.3 of the spec:
          // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
          return doneResult();
        }

        context.method = method;
        context.arg = arg;

        while (true) {
          var delegate = context.delegate;
          if (delegate) {
            var delegateResult = maybeInvokeDelegate(delegate, context);
            if (delegateResult) {
              if (delegateResult === ContinueSentinel) continue;
              return delegateResult;
            }
          }

          if (context.method === "next") {
            // Setting context._sent for legacy support of Babel's
            // function.sent implementation.
            context.sent = context._sent = context.arg;

          } else if (context.method === "throw") {
            if (state === GenStateSuspendedStart) {
              state = GenStateCompleted;
              throw context.arg;
            }

            context.dispatchException(context.arg);

          } else if (context.method === "return") {
            context.abrupt("return", context.arg);
          }

          state = GenStateExecuting;

          var record = tryCatch(innerFn, self, context);
          if (record.type === "normal") {
            // If an exception is thrown from innerFn, we leave state ===
            // GenStateExecuting and loop back for another invocation.
            state = context.done
              ? GenStateCompleted
              : GenStateSuspendedYield;

            if (record.arg === ContinueSentinel) {
              continue;
            }

            return {
              value: record.arg,
              done: context.done
            };

          } else if (record.type === "throw") {
            state = GenStateCompleted;
            // Dispatch the exception by looping back around to the
            // context.dispatchException(context.arg) call above.
            context.method = "throw";
            context.arg = record.arg;
          }
        }
      };
    }

    // Call delegate.iterator[context.method](context.arg) and handle the
    // result, either by returning a { value, done } result from the
    // delegate iterator, or by modifying context.method and context.arg,
    // setting context.delegate to null, and returning the ContinueSentinel.
    function maybeInvokeDelegate(delegate, context) {
      var method = delegate.iterator[context.method];
      if (method === undefined$1) {
        // A .throw or .return when the delegate iterator has no .throw
        // method always terminates the yield* loop.
        context.delegate = null;

        if (context.method === "throw") {
          // Note: ["return"] must be used for ES3 parsing compatibility.
          if (delegate.iterator["return"]) {
            // If the delegate iterator has a return method, give it a
            // chance to clean up.
            context.method = "return";
            context.arg = undefined$1;
            maybeInvokeDelegate(delegate, context);

            if (context.method === "throw") {
              // If maybeInvokeDelegate(context) changed context.method from
              // "return" to "throw", let that override the TypeError below.
              return ContinueSentinel;
            }
          }

          context.method = "throw";
          context.arg = new TypeError(
            "The iterator does not provide a 'throw' method");
        }

        return ContinueSentinel;
      }

      var record = tryCatch(method, delegate.iterator, context.arg);

      if (record.type === "throw") {
        context.method = "throw";
        context.arg = record.arg;
        context.delegate = null;
        return ContinueSentinel;
      }

      var info = record.arg;

      if (! info) {
        context.method = "throw";
        context.arg = new TypeError("iterator result is not an object");
        context.delegate = null;
        return ContinueSentinel;
      }

      if (info.done) {
        // Assign the result of the finished delegate to the temporary
        // variable specified by delegate.resultName (see delegateYield).
        context[delegate.resultName] = info.value;

        // Resume execution at the desired location (see delegateYield).
        context.next = delegate.nextLoc;

        // If context.method was "throw" but the delegate handled the
        // exception, let the outer generator proceed normally. If
        // context.method was "next", forget context.arg since it has been
        // "consumed" by the delegate iterator. If context.method was
        // "return", allow the original .return call to continue in the
        // outer generator.
        if (context.method !== "return") {
          context.method = "next";
          context.arg = undefined$1;
        }

      } else {
        // Re-yield the result returned by the delegate method.
        return info;
      }

      // The delegate iterator is finished, so forget it and continue with
      // the outer generator.
      context.delegate = null;
      return ContinueSentinel;
    }

    // Define Generator.prototype.{next,throw,return} in terms of the
    // unified ._invoke helper method.
    defineIteratorMethods(Gp);

    Gp[toStringTagSymbol] = "Generator";

    // A Generator should always return itself as the iterator object when the
    // @@iterator function is called on it. Some browsers' implementations of the
    // iterator prototype chain incorrectly implement this, causing the Generator
    // object to not be returned from this call. This ensures that doesn't happen.
    // See https://github.com/facebook/regenerator/issues/274 for more details.
    Gp[iteratorSymbol] = function() {
      return this;
    };

    Gp.toString = function() {
      return "[object Generator]";
    };

    function pushTryEntry(locs) {
      var entry = { tryLoc: locs[0] };

      if (1 in locs) {
        entry.catchLoc = locs[1];
      }

      if (2 in locs) {
        entry.finallyLoc = locs[2];
        entry.afterLoc = locs[3];
      }

      this.tryEntries.push(entry);
    }

    function resetTryEntry(entry) {
      var record = entry.completion || {};
      record.type = "normal";
      delete record.arg;
      entry.completion = record;
    }

    function Context(tryLocsList) {
      // The root entry object (effectively a try statement without a catch
      // or a finally block) gives us a place to store values thrown from
      // locations where there is no enclosing try statement.
      this.tryEntries = [{ tryLoc: "root" }];
      tryLocsList.forEach(pushTryEntry, this);
      this.reset(true);
    }

    exports.keys = function(object) {
      var keys = [];
      for (var key in object) {
        keys.push(key);
      }
      keys.reverse();

      // Rather than returning an object with a next method, we keep
      // things simple and return the next function itself.
      return function next() {
        while (keys.length) {
          var key = keys.pop();
          if (key in object) {
            next.value = key;
            next.done = false;
            return next;
          }
        }

        // To avoid creating an additional object, we just hang the .value
        // and .done properties off the next function object itself. This
        // also ensures that the minifier will not anonymize the function.
        next.done = true;
        return next;
      };
    };

    function values(iterable) {
      if (iterable) {
        var iteratorMethod = iterable[iteratorSymbol];
        if (iteratorMethod) {
          return iteratorMethod.call(iterable);
        }

        if (typeof iterable.next === "function") {
          return iterable;
        }

        if (!isNaN(iterable.length)) {
          var i = -1, next = function next() {
            while (++i < iterable.length) {
              if (hasOwn.call(iterable, i)) {
                next.value = iterable[i];
                next.done = false;
                return next;
              }
            }

            next.value = undefined$1;
            next.done = true;

            return next;
          };

          return next.next = next;
        }
      }

      // Return an iterator with no values.
      return { next: doneResult };
    }
    exports.values = values;

    function doneResult() {
      return { value: undefined$1, done: true };
    }

    Context.prototype = {
      constructor: Context,

      reset: function(skipTempReset) {
        this.prev = 0;
        this.next = 0;
        // Resetting context._sent for legacy support of Babel's
        // function.sent implementation.
        this.sent = this._sent = undefined$1;
        this.done = false;
        this.delegate = null;

        this.method = "next";
        this.arg = undefined$1;

        this.tryEntries.forEach(resetTryEntry);

        if (!skipTempReset) {
          for (var name in this) {
            // Not sure about the optimal order of these conditions:
            if (name.charAt(0) === "t" &&
                hasOwn.call(this, name) &&
                !isNaN(+name.slice(1))) {
              this[name] = undefined$1;
            }
          }
        }
      },

      stop: function() {
        this.done = true;

        var rootEntry = this.tryEntries[0];
        var rootRecord = rootEntry.completion;
        if (rootRecord.type === "throw") {
          throw rootRecord.arg;
        }

        return this.rval;
      },

      dispatchException: function(exception) {
        if (this.done) {
          throw exception;
        }

        var context = this;
        function handle(loc, caught) {
          record.type = "throw";
          record.arg = exception;
          context.next = loc;

          if (caught) {
            // If the dispatched exception was caught by a catch block,
            // then let that catch block handle the exception normally.
            context.method = "next";
            context.arg = undefined$1;
          }

          return !! caught;
        }

        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
          var entry = this.tryEntries[i];
          var record = entry.completion;

          if (entry.tryLoc === "root") {
            // Exception thrown outside of any try block that could handle
            // it, so set the completion value of the entire function to
            // throw the exception.
            return handle("end");
          }

          if (entry.tryLoc <= this.prev) {
            var hasCatch = hasOwn.call(entry, "catchLoc");
            var hasFinally = hasOwn.call(entry, "finallyLoc");

            if (hasCatch && hasFinally) {
              if (this.prev < entry.catchLoc) {
                return handle(entry.catchLoc, true);
              } else if (this.prev < entry.finallyLoc) {
                return handle(entry.finallyLoc);
              }

            } else if (hasCatch) {
              if (this.prev < entry.catchLoc) {
                return handle(entry.catchLoc, true);
              }

            } else if (hasFinally) {
              if (this.prev < entry.finallyLoc) {
                return handle(entry.finallyLoc);
              }

            } else {
              throw new Error("try statement without catch or finally");
            }
          }
        }
      },

      abrupt: function(type, arg) {
        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
          var entry = this.tryEntries[i];
          if (entry.tryLoc <= this.prev &&
              hasOwn.call(entry, "finallyLoc") &&
              this.prev < entry.finallyLoc) {
            var finallyEntry = entry;
            break;
          }
        }

        if (finallyEntry &&
            (type === "break" ||
             type === "continue") &&
            finallyEntry.tryLoc <= arg &&
            arg <= finallyEntry.finallyLoc) {
          // Ignore the finally entry if control is not jumping to a
          // location outside the try/catch block.
          finallyEntry = null;
        }

        var record = finallyEntry ? finallyEntry.completion : {};
        record.type = type;
        record.arg = arg;

        if (finallyEntry) {
          this.method = "next";
          this.next = finallyEntry.finallyLoc;
          return ContinueSentinel;
        }

        return this.complete(record);
      },

      complete: function(record, afterLoc) {
        if (record.type === "throw") {
          throw record.arg;
        }

        if (record.type === "break" ||
            record.type === "continue") {
          this.next = record.arg;
        } else if (record.type === "return") {
          this.rval = this.arg = record.arg;
          this.method = "return";
          this.next = "end";
        } else if (record.type === "normal" && afterLoc) {
          this.next = afterLoc;
        }

        return ContinueSentinel;
      },

      finish: function(finallyLoc) {
        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
          var entry = this.tryEntries[i];
          if (entry.finallyLoc === finallyLoc) {
            this.complete(entry.completion, entry.afterLoc);
            resetTryEntry(entry);
            return ContinueSentinel;
          }
        }
      },

      "catch": function(tryLoc) {
        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
          var entry = this.tryEntries[i];
          if (entry.tryLoc === tryLoc) {
            var record = entry.completion;
            if (record.type === "throw") {
              var thrown = record.arg;
              resetTryEntry(entry);
            }
            return thrown;
          }
        }

        // The context.catch method must only be called with a location
        // argument that corresponds to a known catch block.
        throw new Error("illegal catch attempt");
      },

      delegateYield: function(iterable, resultName, nextLoc) {
        this.delegate = {
          iterator: values(iterable),
          resultName: resultName,
          nextLoc: nextLoc
        };

        if (this.method === "next") {
          // Deliberately forget the last sent value so that we don't
          // accidentally pass it on to the delegate.
          this.arg = undefined$1;
        }

        return ContinueSentinel;
      }
    };

    // Regardless of whether this script is executing as a CommonJS module
    // or not, return the runtime object so that we can declare the variable
    // regeneratorRuntime in the outer scope, which allows this module to be
    // injected easily by `bin/regenerator --include-runtime script.js`.
    return exports;

  }(
    // If this script is executing as a CommonJS module, use module.exports
    // as the regeneratorRuntime namespace. Otherwise create a new empty
    // object. Either way, the resulting object will be used to initialize
    // the regeneratorRuntime variable at the top of this file.
     module.exports 
  ));

  try {
    regeneratorRuntime = runtime;
  } catch (accidentalStrictMode) {
    // This module should not be running in strict mode, so the above
    // assignment should always work unless something is misconfigured. Just
    // in case runtime.js accidentally runs in strict mode, we can escape
    // strict mode using a global Function call. This could conceivably fail
    // if a Content Security Policy forbids using Function, but in that case
    // the proper solution is to fix the accidental strict mode problem. If
    // you've misconfigured your bundler to force strict mode and applied a
    // CSP to forbid Function, and you're not willing to fix either of those
    // problems, please detail your unique predicament in a GitHub issue.
    Function("r", "regeneratorRuntime = r")(runtime);
  }
  });

  var regenerator = runtime_1;

  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
    try {
      var info = gen[key](arg);
      var value = info.value;
    } catch (error) {
      reject(error);
      return;
    }

    if (info.done) {
      resolve(value);
    } else {
      Promise.resolve(value).then(_next, _throw);
    }
  }

  function _asyncToGenerator(fn) {
    return function () {
      var self = this,
          args = arguments;
      return new Promise(function (resolve, reject) {
        var gen = fn.apply(self, args);

        function _next(value) {
          asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
        }

        function _throw(err) {
          asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
        }

        _next(undefined);
      });
    };
  }

  var asyncToGenerator = _asyncToGenerator;

  var style_class = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports["default"] = void 0;

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);

  var _classCallCheck2 = interopRequireDefault(classCallCheck);





  /**
   * @description Class Style
   * @param {Object} style  Style configuration
   * @return {Style} Instance of Style
   */
  var Style = function Style(style) {
    (0, _classCallCheck2["default"])(this, Style);
    this.colorProcessor(style);
    var defaultStyle = {
      /**
       * @description Rgba value of graph fill color
       * @type {Array}
       * @default fill = [0, 0, 0, 1]
       */
      fill: [0, 0, 0, 1],

      /**
       * @description Rgba value of graph stroke color
       * @type {Array}
       * @default stroke = [0, 0, 0, 1]
       */
      stroke: [0, 0, 0, 0],

      /**
       * @description Opacity of graph
       * @type {Number}
       * @default opacity = 1
       */
      opacity: 1,

      /**
       * @description LineCap of Ctx
       * @type {String}
       * @default lineCap = null
       * @example lineCap = 'butt'|'round'|'square'
       */
      lineCap: null,

      /**
       * @description Linejoin of Ctx
       * @type {String}
       * @default lineJoin = null
       * @example lineJoin = 'round'|'bevel'|'miter'
       */
      lineJoin: null,

      /**
       * @description LineDash of Ctx
       * @type {Array}
       * @default lineDash = null
       * @example lineDash = [10, 10]
       */
      lineDash: null,

      /**
       * @description LineDashOffset of Ctx
       * @type {Number}
       * @default lineDashOffset = null
       * @example lineDashOffset = 10
       */
      lineDashOffset: null,

      /**
       * @description ShadowBlur of Ctx
       * @type {Number}
       * @default shadowBlur = 0
       */
      shadowBlur: 0,

      /**
       * @description Rgba value of graph shadow color
       * @type {Array}
       * @default shadowColor = [0, 0, 0, 0]
       */
      shadowColor: [0, 0, 0, 0],

      /**
       * @description ShadowOffsetX of Ctx
       * @type {Number}
       * @default shadowOffsetX = 0
       */
      shadowOffsetX: 0,

      /**
       * @description ShadowOffsetY of Ctx
       * @type {Number}
       * @default shadowOffsetY = 0
       */
      shadowOffsetY: 0,

      /**
       * @description LineWidth of Ctx
       * @type {Number}
       * @default lineWidth = 0
       */
      lineWidth: 0,

      /**
       * @description Center point of the graph
       * @type {Array}
       * @default graphCenter = null
       * @example graphCenter = [10, 10]
       */
      graphCenter: null,

      /**
       * @description Graph scale
       * @type {Array}
       * @default scale = null
       * @example scale = [1.5, 1.5]
       */
      scale: null,

      /**
       * @description Graph rotation degree
       * @type {Number}
       * @default rotate = null
       * @example rotate = 10
       */
      rotate: null,

      /**
       * @description Graph translate distance
       * @type {Array}
       * @default translate = null
       * @example translate = [10, 10]
       */
      translate: null,

      /**
       * @description Cursor status when hover
       * @type {String}
       * @default hoverCursor = 'pointer'
       * @example hoverCursor = 'default'|'pointer'|'auto'|'crosshair'|'move'|'wait'|...
       */
      hoverCursor: 'pointer',

      /**
       * @description Font style of Ctx
       * @type {String}
       * @default fontStyle = 'normal'
       * @example fontStyle = 'normal'|'italic'|'oblique'
       */
      fontStyle: 'normal',

      /**
       * @description Font varient of Ctx
       * @type {String}
       * @default fontVarient = 'normal'
       * @example fontVarient = 'normal'|'small-caps'
       */
      fontVarient: 'normal',

      /**
       * @description Font weight of Ctx
       * @type {String|Number}
       * @default fontWeight = 'normal'
       * @example fontWeight = 'normal'|'bold'|'bolder'|'lighter'|Number
       */
      fontWeight: 'normal',

      /**
       * @description Font size of Ctx
       * @type {Number}
       * @default fontSize = 10
       */
      fontSize: 10,

      /**
       * @description Font family of Ctx
       * @type {String}
       * @default fontFamily = 'Arial'
       */
      fontFamily: 'Arial',

      /**
       * @description TextAlign of Ctx
       * @type {String}
       * @default textAlign = 'center'
       * @example textAlign = 'start'|'end'|'left'|'right'|'center'
       */
      textAlign: 'center',

      /**
       * @description TextBaseline of Ctx
       * @type {String}
       * @default textBaseline = 'middle'
       * @example textBaseline = 'top'|'bottom'|'middle'|'alphabetic'|'hanging'
       */
      textBaseline: 'middle',

      /**
       * @description The color used to create the gradient
       * @type {Array}
       * @default gradientColor = null
       * @example gradientColor = ['#000', '#111', '#222']
       */
      gradientColor: null,

      /**
       * @description Gradient type
       * @type {String}
       * @default gradientType = 'linear'
       * @example gradientType = 'linear' | 'radial'
       */
      gradientType: 'linear',

      /**
       * @description Gradient params
       * @type {Array}
       * @default gradientParams = null
       * @example gradientParams = [x0, y0, x1, y1] (Linear Gradient)
       * @example gradientParams = [x0, y0, r0, x1, y1, r1] (Radial Gradient)
       */
      gradientParams: null,

      /**
       * @description When to use gradients
       * @type {String}
       * @default gradientWith = 'stroke'
       * @example gradientWith = 'stroke' | 'fill'
       */
      gradientWith: 'stroke',

      /**
       * @description Gradient color stops
       * @type {String}
       * @default gradientStops = 'auto'
       * @example gradientStops = 'auto' | [0, .2, .3, 1]
       */
      gradientStops: 'auto',

      /**
       * @description Extended color that supports animation transition
       * @type {Array|Object}
       * @default colors = null
       * @example colors = ['#000', '#111', '#222', 'red' ]
       * @example colors = { a: '#000', b: '#111' }
       */
      colors: null
    };
    Object.assign(this, defaultStyle, style);
  };
  /**
   * @description Set colors to rgba value
   * @param {Object} style style config
   * @param {Boolean} reverse Whether to perform reverse operation
   * @return {Undefined} Void
   */


  exports["default"] = Style;

  Style.prototype.colorProcessor = function (style) {
    var reverse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    var processor = reverse ? lib.getColorFromRgbValue : lib.getRgbaValue;
    var colorProcessorKeys = ['fill', 'stroke', 'shadowColor'];
    var allKeys = Object.keys(style);
    var colorKeys = allKeys.filter(function (key) {
      return colorProcessorKeys.find(function (k) {
        return k === key;
      });
    });
    colorKeys.forEach(function (key) {
      return style[key] = processor(style[key]);
    });
    var gradientColor = style.gradientColor,
        colors = style.colors;
    if (gradientColor) style.gradientColor = gradientColor.map(function (c) {
      return processor(c);
    });

    if (colors) {
      var colorsKeys = Object.keys(colors);
      colorsKeys.forEach(function (key) {
        return colors[key] = processor(colors[key]);
      });
    }
  };
  /**
   * @description Init graph style
   * @param {Object} ctx Context of canvas
   * @return {Undefined} Void
   */


  Style.prototype.initStyle = function (ctx) {
    initTransform(ctx, this);
    initGraphStyle(ctx, this);
    initGradient(ctx, this);
  };
  /**
   * @description Init canvas transform
   * @param {Object} ctx  Context of canvas
   * @param {Style} style Instance of Style
   * @return {Undefined} Void
   */


  function initTransform(ctx, style) {
    ctx.save();
    var graphCenter = style.graphCenter,
        rotate = style.rotate,
        scale = style.scale,
        translate = style.translate;
    if (!(graphCenter instanceof Array)) return;
    ctx.translate.apply(ctx, (0, _toConsumableArray2["default"])(graphCenter));
    if (rotate) ctx.rotate(rotate * Math.PI / 180);
    if (scale instanceof Array) ctx.scale.apply(ctx, (0, _toConsumableArray2["default"])(scale));
    if (translate) ctx.translate.apply(ctx, (0, _toConsumableArray2["default"])(translate));
    ctx.translate(-graphCenter[0], -graphCenter[1]);
  }

  var autoSetStyleKeys = ['lineCap', 'lineJoin', 'lineDashOffset', 'shadowOffsetX', 'shadowOffsetY', 'lineWidth', 'textAlign', 'textBaseline'];
  /**
   * @description Set the style of canvas ctx
   * @param {Object} ctx  Context of canvas
   * @param {Style} style Instance of Style
   * @return {Undefined} Void
   */

  function initGraphStyle(ctx, style) {
    var fill = style.fill,
        stroke = style.stroke,
        shadowColor = style.shadowColor,
        opacity = style.opacity;
    autoSetStyleKeys.forEach(function (key) {
      if (key || typeof key === 'number') ctx[key] = style[key];
    });
    fill = (0, _toConsumableArray2["default"])(fill);
    stroke = (0, _toConsumableArray2["default"])(stroke);
    shadowColor = (0, _toConsumableArray2["default"])(shadowColor);
    fill[3] *= opacity;
    stroke[3] *= opacity;
    shadowColor[3] *= opacity;
    ctx.fillStyle = (0, lib.getColorFromRgbValue)(fill);
    ctx.strokeStyle = (0, lib.getColorFromRgbValue)(stroke);
    ctx.shadowColor = (0, lib.getColorFromRgbValue)(shadowColor);
    var lineDash = style.lineDash,
        shadowBlur = style.shadowBlur;

    if (lineDash) {
      lineDash = lineDash.map(function (v) {
        return v >= 0 ? v : 0;
      });
      ctx.setLineDash(lineDash);
    }

    if (typeof shadowBlur === 'number') ctx.shadowBlur = shadowBlur > 0 ? shadowBlur : 0.001;
    var fontStyle = style.fontStyle,
        fontVarient = style.fontVarient,
        fontWeight = style.fontWeight,
        fontSize = style.fontSize,
        fontFamily = style.fontFamily;
    ctx.font = fontStyle + ' ' + fontVarient + ' ' + fontWeight + ' ' + fontSize + 'px' + ' ' + fontFamily;
  }
  /**
   * @description Set the gradient color of canvas ctx
   * @param {Object} ctx  Context of canvas
   * @param {Style} style Instance of Style
   * @return {Undefined} Void
   */


  function initGradient(ctx, style) {
    if (!gradientValidator(style)) return;
    var gradientColor = style.gradientColor,
        gradientParams = style.gradientParams,
        gradientType = style.gradientType,
        gradientWith = style.gradientWith,
        gradientStops = style.gradientStops,
        opacity = style.opacity;
    gradientColor = gradientColor.map(function (color) {
      var colorOpacity = color[3] * opacity;
      var clonedColor = (0, _toConsumableArray2["default"])(color);
      clonedColor[3] = colorOpacity;
      return clonedColor;
    });
    gradientColor = gradientColor.map(function (c) {
      return (0, lib.getColorFromRgbValue)(c);
    });
    if (gradientStops === 'auto') gradientStops = getAutoColorStops(gradientColor);
    var gradient = ctx["create".concat(gradientType.slice(0, 1).toUpperCase() + gradientType.slice(1), "Gradient")].apply(ctx, (0, _toConsumableArray2["default"])(gradientParams));
    gradientStops.forEach(function (stop, i) {
      return gradient.addColorStop(stop, gradientColor[i]);
    });
    ctx["".concat(gradientWith, "Style")] = gradient;
  }
  /**
   * @description Check if the gradient configuration is legal
   * @param {Style} style Instance of Style
   * @return {Boolean} Check Result
   */


  function gradientValidator(style) {
    var gradientColor = style.gradientColor,
        gradientParams = style.gradientParams,
        gradientType = style.gradientType,
        gradientWith = style.gradientWith,
        gradientStops = style.gradientStops;
    if (!gradientColor || !gradientParams) return false;

    if (gradientColor.length === 1) {
      console.warn('The gradient needs to provide at least two colors');
      return false;
    }

    if (gradientType !== 'linear' && gradientType !== 'radial') {
      console.warn('GradientType only supports linear or radial, current value is ' + gradientType);
      return false;
    }

    var gradientParamsLength = gradientParams.length;

    if (gradientType === 'linear' && gradientParamsLength !== 4 || gradientType === 'radial' && gradientParamsLength !== 6) {
      console.warn('The expected length of gradientParams is ' + (gradientType === 'linear' ? '4' : '6'));
      return false;
    }

    if (gradientWith !== 'fill' && gradientWith !== 'stroke') {
      console.warn('GradientWith only supports fill or stroke, current value is ' + gradientWith);
      return false;
    }

    if (gradientStops !== 'auto' && !(gradientStops instanceof Array)) {
      console.warn("gradientStops only supports 'auto' or Number Array ([0, .5, 1]), current value is " + gradientStops);
      return false;
    }

    return true;
  }
  /**
   * @description Get a uniform gradient color stop
   * @param {Array} color Gradient color
   * @return {Array} Gradient color stop
   */


  function getAutoColorStops(color) {
    var stopGap = 1 / (color.length - 1);
    return color.map(function (foo, i) {
      return stopGap * i;
    });
  }
  /**
   * @description Restore canvas ctx transform
   * @param {Object} ctx  Context of canvas
   * @return {Undefined} Void
   */


  Style.prototype.restoreTransform = function (ctx) {
    ctx.restore();
  };
  /**
   * @description Update style data
   * @param {Object} change Changed data
   * @return {Undefined} Void
   */


  Style.prototype.update = function (change) {
    this.colorProcessor(change);
    Object.assign(this, change);
  };
  /**
   * @description Get the current style configuration
   * @return {Object} Style configuration
   */


  Style.prototype.getStyle = function () {
    var clonedStyle = (0, util.deepClone)(this, true);
    this.colorProcessor(clonedStyle, true);
    return clonedStyle;
  };
  });

  unwrapExports(style_class);

  var curves = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports["default"] = exports.easeInOutBounce = exports.easeOutBounce = exports.easeInBounce = exports.easeInOutElastic = exports.easeOutElastic = exports.easeInElastic = exports.easeInOutBack = exports.easeOutBack = exports.easeInBack = exports.easeInOutQuint = exports.easeOutQuint = exports.easeInQuint = exports.easeInOutQuart = exports.easeOutQuart = exports.easeInQuart = exports.easeInOutCubic = exports.easeOutCubic = exports.easeInCubic = exports.easeInOutQuad = exports.easeOutQuad = exports.easeInQuad = exports.easeInOutSine = exports.easeOutSine = exports.easeInSine = exports.linear = void 0;
  var linear = [[[0, 1], '', [0.33, 0.67]], [[1, 0], [0.67, 0.33]]];
  /**
   * @description Sine
   */

  exports.linear = linear;
  var easeInSine = [[[0, 1]], [[0.538, 0.564], [0.169, 0.912], [0.880, 0.196]], [[1, 0]]];
  exports.easeInSine = easeInSine;
  var easeOutSine = [[[0, 1]], [[0.444, 0.448], [0.169, 0.736], [0.718, 0.16]], [[1, 0]]];
  exports.easeOutSine = easeOutSine;
  var easeInOutSine = [[[0, 1]], [[0.5, 0.5], [0.2, 1], [0.8, 0]], [[1, 0]]];
  /**
   * @description Quad
   */

  exports.easeInOutSine = easeInOutSine;
  var easeInQuad = [[[0, 1]], [[0.550, 0.584], [0.231, 0.904], [0.868, 0.264]], [[1, 0]]];
  exports.easeInQuad = easeInQuad;
  var easeOutQuad = [[[0, 1]], [[0.413, 0.428], [0.065, 0.816], [0.760, 0.04]], [[1, 0]]];
  exports.easeOutQuad = easeOutQuad;
  var easeInOutQuad = [[[0, 1]], [[0.5, 0.5], [0.3, 0.9], [0.7, 0.1]], [[1, 0]]];
  /**
   * @description Cubic
   */

  exports.easeInOutQuad = easeInOutQuad;
  var easeInCubic = [[[0, 1]], [[0.679, 0.688], [0.366, 0.992], [0.992, 0.384]], [[1, 0]]];
  exports.easeInCubic = easeInCubic;
  var easeOutCubic = [[[0, 1]], [[0.321, 0.312], [0.008, 0.616], [0.634, 0.008]], [[1, 0]]];
  exports.easeOutCubic = easeOutCubic;
  var easeInOutCubic = [[[0, 1]], [[0.5, 0.5], [0.3, 1], [0.7, 0]], [[1, 0]]];
  /**
   * @description Quart
   */

  exports.easeInOutCubic = easeInOutCubic;
  var easeInQuart = [[[0, 1]], [[0.812, 0.74], [0.611, 0.988], [1.013, 0.492]], [[1, 0]]];
  exports.easeInQuart = easeInQuart;
  var easeOutQuart = [[[0, 1]], [[0.152, 0.244], [0.001, 0.448], [0.285, -0.02]], [[1, 0]]];
  exports.easeOutQuart = easeOutQuart;
  var easeInOutQuart = [[[0, 1]], [[0.5, 0.5], [0.4, 1], [0.6, 0]], [[1, 0]]];
  /**
   * @description Quint
   */

  exports.easeInOutQuart = easeInOutQuart;
  var easeInQuint = [[[0, 1]], [[0.857, 0.856], [0.714, 1], [1, 0.712]], [[1, 0]]];
  exports.easeInQuint = easeInQuint;
  var easeOutQuint = [[[0, 1]], [[0.108, 0.2], [0.001, 0.4], [0.214, -0.012]], [[1, 0]]];
  exports.easeOutQuint = easeOutQuint;
  var easeInOutQuint = [[[0, 1]], [[0.5, 0.5], [0.5, 1], [0.5, 0]], [[1, 0]]];
  /**
   * @description Back
   */

  exports.easeInOutQuint = easeInOutQuint;
  var easeInBack = [[[0, 1]], [[0.667, 0.896], [0.380, 1.184], [0.955, 0.616]], [[1, 0]]];
  exports.easeInBack = easeInBack;
  var easeOutBack = [[[0, 1]], [[0.335, 0.028], [0.061, 0.22], [0.631, -0.18]], [[1, 0]]];
  exports.easeOutBack = easeOutBack;
  var easeInOutBack = [[[0, 1]], [[0.5, 0.5], [0.4, 1.4], [0.6, -0.4]], [[1, 0]]];
  /**
   * @description Elastic
   */

  exports.easeInOutBack = easeInOutBack;
  var easeInElastic = [[[0, 1]], [[0.474, 0.964], [0.382, 0.988], [0.557, 0.952]], [[0.619, 1.076], [0.565, 1.088], [0.669, 1.08]], [[0.770, 0.916], [0.712, 0.924], [0.847, 0.904]], [[0.911, 1.304], [0.872, 1.316], [0.961, 1.34]], [[1, 0]]];
  exports.easeInElastic = easeInElastic;
  var easeOutElastic = [[[0, 1]], [[0.073, -0.32], [0.034, -0.328], [0.104, -0.344]], [[0.191, 0.092], [0.110, 0.06], [0.256, 0.08]], [[0.310, -0.076], [0.260, -0.068], [0.357, -0.076]], [[0.432, 0.032], [0.362, 0.028], [0.683, -0.004]], [[1, 0]]];
  exports.easeOutElastic = easeOutElastic;
  var easeInOutElastic = [[[0, 1]], [[0.210, 0.94], [0.167, 0.884], [0.252, 0.98]], [[0.299, 1.104], [0.256, 1.092], [0.347, 1.108]], [[0.5, 0.496], [0.451, 0.672], [0.548, 0.324]], [[0.696, -0.108], [0.652, -0.112], [0.741, -0.124]], [[0.805, 0.064], [0.756, 0.012], [0.866, 0.096]], [[1, 0]]];
  /**
   * @description Bounce
   */

  exports.easeInOutElastic = easeInOutElastic;
  var easeInBounce = [[[0, 1]], [[0.148, 1], [0.075, 0.868], [0.193, 0.848]], [[0.326, 1], [0.276, 0.836], [0.405, 0.712]], [[0.600, 1], [0.511, 0.708], [0.671, 0.348]], [[1, 0]]];
  exports.easeInBounce = easeInBounce;
  var easeOutBounce = [[[0, 1]], [[0.357, 0.004], [0.270, 0.592], [0.376, 0.252]], [[0.604, -0.004], [0.548, 0.312], [0.669, 0.184]], [[0.820, 0], [0.749, 0.184], [0.905, 0.132]], [[1, 0]]];
  exports.easeOutBounce = easeOutBounce;
  var easeInOutBounce = [[[0, 1]], [[0.102, 1], [0.050, 0.864], [0.117, 0.86]], [[0.216, 0.996], [0.208, 0.844], [0.227, 0.808]], [[0.347, 0.996], [0.343, 0.8], [0.480, 0.292]], [[0.635, 0.004], [0.511, 0.676], [0.656, 0.208]], [[0.787, 0], [0.760, 0.2], [0.795, 0.144]], [[0.905, -0.004], [0.899, 0.164], [0.944, 0.144]], [[1, 0]]];
  exports.easeInOutBounce = easeInOutBounce;

  var _default = new Map([['linear', linear], ['easeInSine', easeInSine], ['easeOutSine', easeOutSine], ['easeInOutSine', easeInOutSine], ['easeInQuad', easeInQuad], ['easeOutQuad', easeOutQuad], ['easeInOutQuad', easeInOutQuad], ['easeInCubic', easeInCubic], ['easeOutCubic', easeOutCubic], ['easeInOutCubic', easeInOutCubic], ['easeInQuart', easeInQuart], ['easeOutQuart', easeOutQuart], ['easeInOutQuart', easeInOutQuart], ['easeInQuint', easeInQuint], ['easeOutQuint', easeOutQuint], ['easeInOutQuint', easeInOutQuint], ['easeInBack', easeInBack], ['easeOutBack', easeOutBack], ['easeInOutBack', easeInOutBack], ['easeInElastic', easeInElastic], ['easeOutElastic', easeOutElastic], ['easeInOutElastic', easeInOutElastic], ['easeInBounce', easeInBounce], ['easeOutBounce', easeOutBounce], ['easeInOutBounce', easeInOutBounce]]);

  exports["default"] = _default;
  });

  unwrapExports(curves);
  var curves_1 = curves.easeInOutBounce;
  var curves_2 = curves.easeOutBounce;
  var curves_3 = curves.easeInBounce;
  var curves_4 = curves.easeInOutElastic;
  var curves_5 = curves.easeOutElastic;
  var curves_6 = curves.easeInElastic;
  var curves_7 = curves.easeInOutBack;
  var curves_8 = curves.easeOutBack;
  var curves_9 = curves.easeInBack;
  var curves_10 = curves.easeInOutQuint;
  var curves_11 = curves.easeOutQuint;
  var curves_12 = curves.easeInQuint;
  var curves_13 = curves.easeInOutQuart;
  var curves_14 = curves.easeOutQuart;
  var curves_15 = curves.easeInQuart;
  var curves_16 = curves.easeInOutCubic;
  var curves_17 = curves.easeOutCubic;
  var curves_18 = curves.easeInCubic;
  var curves_19 = curves.easeInOutQuad;
  var curves_20 = curves.easeOutQuad;
  var curves_21 = curves.easeInQuad;
  var curves_22 = curves.easeInOutSine;
  var curves_23 = curves.easeOutSine;
  var curves_24 = curves.easeInSine;
  var curves_25 = curves.linear;

  var lib$2 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.transition = transition;
  exports.injectNewCurve = injectNewCurve;
  exports["default"] = void 0;

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _typeof2 = interopRequireDefault(_typeof_1);

  var _curves = interopRequireDefault(curves);

  var defaultTransitionBC = 'linear';
  /**
   * @description Get the N-frame animation state by the start and end state
   *              of the animation and the easing curve
   * @param {String|Array} tBC               Easing curve name or data
   * @param {Number|Array|Object} startState Animation start state
   * @param {Number|Array|Object} endState   Animation end state
   * @param {Number} frameNum                Number of Animation frames
   * @param {Boolean} deep                   Whether to use recursive mode
   * @return {Array|Boolean} State of each frame of the animation (Invalid input will return false)
   */

  function transition(tBC) {
    var startState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
    var endState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
    var frameNum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 30;
    var deep = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
    if (!checkParams.apply(void 0, arguments)) return false;

    try {
      // Get the transition bezier curve
      var bezierCurve = getBezierCurve(tBC); // Get the progress of each frame state

      var frameStateProgress = getFrameStateProgress(bezierCurve, frameNum); // If the recursion mode is not enabled or the state type is Number, the shallow state calculation is performed directly.

      if (!deep || typeof endState === 'number') return getTransitionState(startState, endState, frameStateProgress);
      return recursionTransitionState(startState, endState, frameStateProgress);
    } catch (_unused) {
      console.warn('Transition parameter may be abnormal!');
      return [endState];
    }
  }
  /**
   * @description Check if the parameters are legal
   * @param {String} tBC      Name of transition bezier curve
   * @param {Any} startState  Transition start state
   * @param {Any} endState    Transition end state
   * @param {Number} frameNum Number of transition frames
   * @return {Boolean} Is the parameter legal
   */


  function checkParams(tBC) {
    var startState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    var endState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
    var frameNum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 30;

    if (!tBC || startState === false || endState === false || !frameNum) {
      console.error('transition: Missing Parameters!');
      return false;
    }

    if ((0, _typeof2["default"])(startState) !== (0, _typeof2["default"])(endState)) {
      console.error('transition: Inconsistent Status Types!');
      return false;
    }

    var stateType = (0, _typeof2["default"])(endState);

    if (stateType === 'string' || stateType === 'boolean' || !tBC.length) {
      console.error('transition: Unsupported Data Type of State!');
      return false;
    }

    if (!_curves["default"].has(tBC) && !(tBC instanceof Array)) {
      console.warn('transition: Transition curve not found, default curve will be used!');
    }

    return true;
  }
  /**
   * @description Get the transition bezier curve
   * @param {String} tBC Name of transition bezier curve
   * @return {Array} Bezier curve data
   */


  function getBezierCurve(tBC) {
    var bezierCurve = '';

    if (_curves["default"].has(tBC)) {
      bezierCurve = _curves["default"].get(tBC);
    } else if (tBC instanceof Array) {
      bezierCurve = tBC;
    } else {
      bezierCurve = _curves["default"].get(defaultTransitionBC);
    }

    return bezierCurve;
  }
  /**
   * @description Get the progress of each frame state
   * @param {Array} bezierCurve Transition bezier curve
   * @param {Number} frameNum   Number of transition frames
   * @return {Array} Progress of each frame state
   */


  function getFrameStateProgress(bezierCurve, frameNum) {
    var tMinus = 1 / (frameNum - 1);
    var tState = new Array(frameNum).fill(0).map(function (t, i) {
      return i * tMinus;
    });
    var frameState = tState.map(function (t) {
      return getFrameStateFromT(bezierCurve, t);
    });
    return frameState;
  }
  /**
   * @description Get the progress of the corresponding frame according to t
   * @param {Array} bezierCurve Transition bezier curve
   * @param {Number} t          Current frame t
   * @return {Number} Progress of current frame
   */


  function getFrameStateFromT(bezierCurve, t) {
    var tBezierCurvePoint = getBezierCurvePointFromT(bezierCurve, t);
    var bezierCurvePointT = getBezierCurvePointTFromReT(tBezierCurvePoint, t);
    return getBezierCurveTState(tBezierCurvePoint, bezierCurvePointT);
  }
  /**
   * @description Get the corresponding sub-curve according to t
   * @param {Array} bezierCurve Transition bezier curve
   * @param {Number} t          Current frame t
   * @return {Array} Sub-curve of t
   */


  function getBezierCurvePointFromT(bezierCurve, t) {
    var lastIndex = bezierCurve.length - 1;
    var begin = '',
        end = '';
    bezierCurve.findIndex(function (item, i) {
      if (i === lastIndex) return;
      begin = item;
      end = bezierCurve[i + 1];
      var currentMainPointX = begin[0][0];
      var nextMainPointX = end[0][0];
      return t >= currentMainPointX && t < nextMainPointX;
    });
    var p0 = begin[0];
    var p1 = begin[2] || begin[0];
    var p2 = end[1] || end[0];
    var p3 = end[0];
    return [p0, p1, p2, p3];
  }
  /**
   * @description Get local t based on t and sub-curve
   * @param {Array} bezierCurve Sub-curve
   * @param {Number} t          Current frame t
   * @return {Number} local t of sub-curve
   */


  function getBezierCurvePointTFromReT(bezierCurve, t) {
    var reBeginX = bezierCurve[0][0];
    var reEndX = bezierCurve[3][0];
    var xMinus = reEndX - reBeginX;
    var tMinus = t - reBeginX;
    return tMinus / xMinus;
  }
  /**
   * @description Get the curve progress of t
   * @param {Array} bezierCurve Sub-curve
   * @param {Number} t          Current frame t
   * @return {Number} Progress of current frame
   */


  function getBezierCurveTState(_ref, t) {
    var _ref2 = (0, _slicedToArray2["default"])(_ref, 4),
        _ref2$ = (0, _slicedToArray2["default"])(_ref2[0], 2),
        p0 = _ref2$[1],
        _ref2$2 = (0, _slicedToArray2["default"])(_ref2[1], 2),
        p1 = _ref2$2[1],
        _ref2$3 = (0, _slicedToArray2["default"])(_ref2[2], 2),
        p2 = _ref2$3[1],
        _ref2$4 = (0, _slicedToArray2["default"])(_ref2[3], 2),
        p3 = _ref2$4[1];

    var pow = Math.pow;
    var tMinus = 1 - t;
    var result1 = p0 * pow(tMinus, 3);
    var result2 = 3 * p1 * t * pow(tMinus, 2);
    var result3 = 3 * p2 * pow(t, 2) * tMinus;
    var result4 = p3 * pow(t, 3);
    return 1 - (result1 + result2 + result3 + result4);
  }
  /**
   * @description Get transition state according to frame progress
   * @param {Any} startState   Transition start state
   * @param {Any} endState     Transition end state
   * @param {Array} frameState Frame state progress
   * @return {Array} Transition frame state
   */


  function getTransitionState(begin, end, frameState) {
    var stateType = 'object';
    if (typeof begin === 'number') stateType = 'number';
    if (begin instanceof Array) stateType = 'array';
    if (stateType === 'number') return getNumberTransitionState(begin, end, frameState);
    if (stateType === 'array') return getArrayTransitionState(begin, end, frameState);
    if (stateType === 'object') return getObjectTransitionState(begin, end, frameState);
    return frameState.map(function (t) {
      return end;
    });
  }
  /**
   * @description Get the transition data of the number type
   * @param {Number} startState Transition start state
   * @param {Number} endState   Transition end state
   * @param {Array} frameState  Frame state progress
   * @return {Array} Transition frame state
   */


  function getNumberTransitionState(begin, end, frameState) {
    var minus = end - begin;
    return frameState.map(function (s) {
      return begin + minus * s;
    });
  }
  /**
   * @description Get the transition data of the array type
   * @param {Array} startState Transition start state
   * @param {Array} endState   Transition end state
   * @param {Array} frameState Frame state progress
   * @return {Array} Transition frame state
   */


  function getArrayTransitionState(begin, end, frameState) {
    var minus = end.map(function (v, i) {
      if (typeof v !== 'number') return false;
      return v - begin[i];
    });
    return frameState.map(function (s) {
      return minus.map(function (v, i) {
        if (v === false) return end[i];
        return begin[i] + v * s;
      });
    });
  }
  /**
   * @description Get the transition data of the object type
   * @param {Object} startState Transition start state
   * @param {Object} endState   Transition end state
   * @param {Array} frameState  Frame state progress
   * @return {Array} Transition frame state
   */


  function getObjectTransitionState(begin, end, frameState) {
    var keys = Object.keys(end);
    var beginValue = keys.map(function (k) {
      return begin[k];
    });
    var endValue = keys.map(function (k) {
      return end[k];
    });
    var arrayState = getArrayTransitionState(beginValue, endValue, frameState);
    return arrayState.map(function (item) {
      var frameData = {};
      item.forEach(function (v, i) {
        return frameData[keys[i]] = v;
      });
      return frameData;
    });
  }
  /**
   * @description Get the transition state data by recursion
   * @param {Array|Object} startState Transition start state
   * @param {Array|Object} endState   Transition end state
   * @param {Array} frameState        Frame state progress
   * @return {Array} Transition frame state
   */


  function recursionTransitionState(begin, end, frameState) {
    var state = getTransitionState(begin, end, frameState);

    var _loop = function _loop(key) {
      var bTemp = begin[key];
      var eTemp = end[key];
      if ((0, _typeof2["default"])(eTemp) !== 'object') return "continue";
      var data = recursionTransitionState(bTemp, eTemp, frameState);
      state.forEach(function (fs, i) {
        return fs[key] = data[i];
      });
    };

    for (var key in end) {
      var _ret = _loop(key);

      if (_ret === "continue") continue;
    }

    return state;
  }
  /**
   * @description Inject new curve into curves as config
   * @param {Any} key     The key of curve
   * @param {Array} curve Bezier curve data
   * @return {Undefined} No return
   */


  function injectNewCurve(key, curve) {
    if (!key || !curve) {
      console.error('InjectNewCurve Missing Parameters!');
      return;
    }

    _curves["default"].set(key, curve);
  }

  var _default = transition;
  exports["default"] = _default;
  });

  unwrapExports(lib$2);
  var lib_1$1 = lib$2.transition;
  var lib_2$1 = lib$2.injectNewCurve;

  var graph_class = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports["default"] = void 0;

  var _regenerator = interopRequireDefault(regenerator);

  var _asyncToGenerator2 = interopRequireDefault(asyncToGenerator);

  var _typeof2 = interopRequireDefault(_typeof_1);

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);

  var _classCallCheck2 = interopRequireDefault(classCallCheck);

  var _style = interopRequireDefault(style_class);

  var _transition = interopRequireDefault(lib$2);



  /**
   * @description Class Graph
   * @param {Object} graph  Graph default configuration
   * @param {Object} config Graph config
   * @return {Graph} Instance of Graph
   */
  var Graph = function Graph(graph, config) {
    (0, _classCallCheck2["default"])(this, Graph);
    config = (0, util.deepClone)(config, true);
    var defaultConfig = {
      /**
       * @description Weather to render graph
       * @type {Boolean}
       * @default visible = true
       */
      visible: true,

      /**
       * @description Whether to enable drag
       * @type {Boolean}
       * @default drag = false
       */
      drag: false,

      /**
       * @description Whether to enable hover
       * @type {Boolean}
       * @default hover = false
       */
      hover: false,

      /**
       * @description Graph rendering index
       *  Give priority to index high graph in rendering
       * @type {Number}
       * @example index = 1
       */
      index: 1,

      /**
       * @description Animation delay time(ms)
       * @type {Number}
       * @default animationDelay = 0
       */
      animationDelay: 0,

      /**
       * @description Number of animation frames
       * @type {Number}
       * @default animationFrame = 30
       */
      animationFrame: 30,

      /**
       * @description Animation dynamic curve (Supported by transition)
       * @type {String}
       * @default animationCurve = 'linear'
       * @link https://github.com/jiaming743/Transition
       */
      animationCurve: 'linear',

      /**
       * @description Weather to pause graph animation
       * @type {Boolean}
       * @default animationPause = false
       */
      animationPause: false,

      /**
       * @description Rectangular hover detection zone
       *  Use this method for hover detection first
       * @type {Null|Array}
       * @default hoverRect = null
       * @example hoverRect = [0, 0, 100, 100] // [Rect start x, y, Rect width, height]
       */
      hoverRect: null,

      /**
       * @description Mouse enter event handler
       * @type {Function|Null}
       * @default mouseEnter = null
       */
      mouseEnter: null,

      /**
       * @description Mouse outer event handler
       * @type {Function|Null}
       * @default mouseOuter = null
       */
      mouseOuter: null,

      /**
       * @description Mouse click event handler
       * @type {Function|Null}
       * @default click = null
       */
      click: null
    };
    var configAbleNot = {
      status: 'static',
      animationRoot: [],
      animationKeys: [],
      animationFrameState: [],
      cache: {}
    };
    if (!config.shape) config.shape = {};
    if (!config.style) config.style = {};
    var shape = Object.assign({}, graph.shape, config.shape);
    Object.assign(defaultConfig, config, configAbleNot);
    Object.assign(this, graph, defaultConfig);
    this.shape = shape;
    this.style = new _style["default"](config.style);
    this.addedProcessor();
  };
  /**
   * @description Processor of added
   * @return {Undefined} Void
   */


  exports["default"] = Graph;

  Graph.prototype.addedProcessor = function () {
    if (typeof this.setGraphCenter === 'function') this.setGraphCenter(null, this); // The life cycle 'added"

    if (typeof this.added === 'function') this.added(this);
  };
  /**
   * @description Processor of draw
   * @param {CRender} render Instance of CRender
   * @param {Graph} graph    Instance of Graph
   * @return {Undefined} Void
   */


  Graph.prototype.drawProcessor = function (render, graph) {
    var ctx = render.ctx;
    graph.style.initStyle(ctx);
    if (typeof this.beforeDraw === 'function') this.beforeDraw(this, render);
    graph.draw(render, graph);
    if (typeof this.drawed === 'function') this.drawed(this, render);
    graph.style.restoreTransform(ctx);
  };
  /**
   * @description Processor of hover check
   * @param {Array} position Mouse Position
   * @param {Graph} graph    Instance of Graph
   * @return {Boolean} Result of hover check
   */


  Graph.prototype.hoverCheckProcessor = function (position, _ref) {
    var hoverRect = _ref.hoverRect,
        style = _ref.style,
        hoverCheck = _ref.hoverCheck;
    var graphCenter = style.graphCenter,
        rotate = style.rotate,
        scale = style.scale,
        translate = style.translate;

    if (graphCenter) {
      if (rotate) position = (0, util.getRotatePointPos)(-rotate, position, graphCenter);
      if (scale) position = (0, util.getScalePointPos)(scale.map(function (s) {
        return 1 / s;
      }), position, graphCenter);
      if (translate) position = (0, util.getTranslatePointPos)(translate.map(function (v) {
        return v * -1;
      }), position);
    }

    if (hoverRect) return util.checkPointIsInRect.apply(void 0, [position].concat((0, _toConsumableArray2["default"])(hoverRect)));
    return hoverCheck(position, this);
  };
  /**
   * @description Processor of move
   * @param {Event} e Mouse movement event
   * @return {Undefined} Void
   */


  Graph.prototype.moveProcessor = function (e) {
    this.move(e, this);
    if (typeof this.beforeMove === 'function') this.beforeMove(e, this);
    if (typeof this.setGraphCenter === 'function') this.setGraphCenter(e, this);
    if (typeof this.moved === 'function') this.moved(e, this);
  };
  /**
   * @description Update graph state
   * @param {String} attrName Updated attribute name
   * @param {Any} change      Updated value
   * @return {Undefined} Void
   */


  Graph.prototype.attr = function (attrName) {
    var change = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
    if (!attrName || change === undefined) return false;
    var isObject = (0, _typeof2["default"])(this[attrName]) === 'object';
    if (isObject) change = (0, util.deepClone)(change, true);
    var render = this.render;

    if (attrName === 'style') {
      this.style.update(change);
    } else if (isObject) {
      Object.assign(this[attrName], change);
    } else {
      this[attrName] = change;
    }

    if (attrName === 'index') render.sortGraphsByIndex();
    render.drawAllGraph();
  };
  /**
   * @description Update graphics state (with animation)
   *  Only shape and style attributes are supported
   * @param {String} attrName Updated attribute name
   * @param {Any} change      Updated value
   * @param {Boolean} wait    Whether to store the animation waiting
   *                          for the next animation request
   * @return {Promise} Animation Promise
   */


  Graph.prototype.animation =
  /*#__PURE__*/
  function () {
    var _ref2 = (0, _asyncToGenerator2["default"])(
    /*#__PURE__*/
    _regenerator["default"].mark(function _callee2(attrName, change) {
      var wait,
          changeRoot,
          changeKeys,
          beforeState,
          animationFrame,
          animationCurve,
          animationDelay,
          animationFrameState,
          render,
          _args2 = arguments;
      return _regenerator["default"].wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              wait = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : false;

              if (!(attrName !== 'shape' && attrName !== 'style')) {
                _context2.next = 4;
                break;
              }

              console.error('Only supported shape and style animation!');
              return _context2.abrupt("return");

            case 4:
              change = (0, util.deepClone)(change, true);
              if (attrName === 'style') this.style.colorProcessor(change);
              changeRoot = this[attrName];
              changeKeys = Object.keys(change);
              beforeState = {};
              changeKeys.forEach(function (key) {
                return beforeState[key] = changeRoot[key];
              });
              animationFrame = this.animationFrame, animationCurve = this.animationCurve, animationDelay = this.animationDelay;
              animationFrameState = (0, _transition["default"])(animationCurve, beforeState, change, animationFrame, true);
              this.animationRoot.push(changeRoot);
              this.animationKeys.push(changeKeys);
              this.animationFrameState.push(animationFrameState);

              if (!wait) {
                _context2.next = 17;
                break;
              }

              return _context2.abrupt("return");

            case 17:
              if (!(animationDelay > 0)) {
                _context2.next = 20;
                break;
              }

              _context2.next = 20;
              return delay(animationDelay);

            case 20:
              render = this.render;
              return _context2.abrupt("return", new Promise(
              /*#__PURE__*/
              function () {
                var _ref3 = (0, _asyncToGenerator2["default"])(
                /*#__PURE__*/
                _regenerator["default"].mark(function _callee(resolve) {
                  return _regenerator["default"].wrap(function _callee$(_context) {
                    while (1) {
                      switch (_context.prev = _context.next) {
                        case 0:
                          _context.next = 2;
                          return render.launchAnimation();

                        case 2:
                          resolve();

                        case 3:
                        case "end":
                          return _context.stop();
                      }
                    }
                  }, _callee);
                }));

                return function (_x3) {
                  return _ref3.apply(this, arguments);
                };
              }()));

            case 22:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2, this);
    }));

    return function (_x, _x2) {
      return _ref2.apply(this, arguments);
    };
  }();
  /**
   * @description Extract the next frame of data from the animation queue
   *              and update the graph state
   * @return {Undefined} Void
   */


  Graph.prototype.turnNextAnimationFrame = function (timeStamp) {
    var animationDelay = this.animationDelay,
        animationRoot = this.animationRoot,
        animationKeys = this.animationKeys,
        animationFrameState = this.animationFrameState,
        animationPause = this.animationPause;
    if (animationPause) return;
    if (Date.now() - timeStamp < animationDelay) return;
    animationRoot.forEach(function (root, i) {
      animationKeys[i].forEach(function (key) {
        root[key] = animationFrameState[i][0][key];
      });
    });
    animationFrameState.forEach(function (stateItem, i) {
      stateItem.shift();
      var noFrame = stateItem.length === 0;
      if (noFrame) animationRoot[i] = null;
      if (noFrame) animationKeys[i] = null;
    });
    this.animationFrameState = animationFrameState.filter(function (state) {
      return state.length;
    });
    this.animationRoot = animationRoot.filter(function (root) {
      return root;
    });
    this.animationKeys = animationKeys.filter(function (keys) {
      return keys;
    });
  };
  /**
   * @description Skip to the last frame of animation
   * @return {Undefined} Void
   */


  Graph.prototype.animationEnd = function () {
    var animationFrameState = this.animationFrameState,
        animationKeys = this.animationKeys,
        animationRoot = this.animationRoot,
        render = this.render;
    animationRoot.forEach(function (root, i) {
      var currentKeys = animationKeys[i];
      var lastState = animationFrameState[i].pop();
      currentKeys.forEach(function (key) {
        return root[key] = lastState[key];
      });
    });
    this.animationFrameState = [];
    this.animationKeys = [];
    this.animationRoot = [];
    return render.drawAllGraph();
  };
  /**
   * @description Pause animation behavior
   * @return {Undefined} Void
   */


  Graph.prototype.pauseAnimation = function () {
    this.attr('animationPause', true);
  };
  /**
   * @description Try animation behavior
   * @return {Undefined} Void
   */


  Graph.prototype.playAnimation = function () {
    var render = this.render;
    this.attr('animationPause', false);
    return new Promise(
    /*#__PURE__*/
    function () {
      var _ref4 = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee3(resolve) {
        return _regenerator["default"].wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                _context3.next = 2;
                return render.launchAnimation();

              case 2:
                resolve();

              case 3:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3);
      }));

      return function (_x4) {
        return _ref4.apply(this, arguments);
      };
    }());
  };
  /**
   * @description Processor of delete
   * @param {CRender} render Instance of CRender
   * @return {Undefined} Void
   */


  Graph.prototype.delProcessor = function (render) {
    var _this = this;

    var graphs = render.graphs;
    var index = graphs.findIndex(function (graph) {
      return graph === _this;
    });
    if (index === -1) return;
    if (typeof this.beforeDelete === 'function') this.beforeDelete(this);
    graphs.splice(index, 1, null);
    if (typeof this.deleted === 'function') this.deleted(this);
  };
  /**
   * @description Return a timed release Promise
   * @param {Number} time Release time
   * @return {Promise} A timed release Promise
   */


  function delay(time) {
    return new Promise(function (resolve) {
      setTimeout(resolve, time);
    });
  }
  });

  unwrapExports(graph_class);

  var crender_class = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports["default"] = void 0;

  var _defineProperty2 = interopRequireDefault(defineProperty);

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);

  var _classCallCheck2 = interopRequireDefault(classCallCheck);

  var _color = interopRequireDefault(lib);

  var _bezierCurve = interopRequireDefault(lib$1);



  var _graphs = interopRequireDefault(graphs_1);

  var _graph = interopRequireDefault(graph_class);

  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  /**
   * @description           Class of CRender
   * @param {Object} canvas Canvas DOM
   * @return {CRender}      Instance of CRender
   */
  var CRender = function CRender(canvas) {
    (0, _classCallCheck2["default"])(this, CRender);

    if (!canvas) {
      console.error('CRender Missing parameters!');
      return;
    }

    var ctx = canvas.getContext('2d');
    var clientWidth = canvas.clientWidth,
        clientHeight = canvas.clientHeight;
    var area = [clientWidth, clientHeight];
    canvas.setAttribute('width', clientWidth);
    canvas.setAttribute('height', clientHeight);
    /**
     * @description Context of the canvas
     * @type {Object}
     * @example ctx = canvas.getContext('2d')
     */

    this.ctx = ctx;
    /**
     * @description Width and height of the canvas
     * @type {Array}
     * @example area = [300，100]
     */

    this.area = area;
    /**
     * @description Whether render is in animation rendering
     * @type {Boolean}
     * @example animationStatus = true|false
     */

    this.animationStatus = false;
    /**
     * @description Added graph
     * @type {[Graph]}
     * @example graphs = [Graph, Graph, ...]
     */

    this.graphs = [];
    /**
     * @description Color plugin
     * @type {Object}
     * @link https://github.com/jiaming743/color
     */

    this.color = _color["default"];
    /**
     * @description Bezier Curve plugin
     * @type {Object}
     * @link https://github.com/jiaming743/BezierCurve
     */

    this.bezierCurve = _bezierCurve["default"]; // bind event handler

    canvas.addEventListener('mousedown', mouseDown.bind(this));
    canvas.addEventListener('mousemove', mouseMove.bind(this));
    canvas.addEventListener('mouseup', mouseUp.bind(this));
  };
  /**
   * @description        Clear canvas drawing area
   * @return {Undefined} Void
   */


  exports["default"] = CRender;

  CRender.prototype.clearArea = function () {
    var _this$ctx;

    var area = this.area;

    (_this$ctx = this.ctx).clearRect.apply(_this$ctx, [0, 0].concat((0, _toConsumableArray2["default"])(area)));
  };
  /**
   * @description           Add graph to render
   * @param {Object} config Graph configuration
   * @return {Graph}        Graph instance
   */


  CRender.prototype.add = function () {
    var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    var name = config.name;

    if (!name) {
      console.error('add Missing parameters!');
      return;
    }

    var graphConfig = _graphs["default"].get(name);

    if (!graphConfig) {
      console.warn('No corresponding graph configuration found!');
      return;
    }

    var graph = new _graph["default"](graphConfig, config);
    if (!graph.validator(graph)) return;
    graph.render = this;
    this.graphs.push(graph);
    this.sortGraphsByIndex();
    this.drawAllGraph();
    return graph;
  };
  /**
   * @description Sort the graph by index
   * @return {Undefined} Void
   */


  CRender.prototype.sortGraphsByIndex = function () {
    var graphs = this.graphs;
    graphs.sort(function (a, b) {
      if (a.index > b.index) return 1;
      if (a.index === b.index) return 0;
      if (a.index < b.index) return -1;
    });
  };
  /**
   * @description         Delete graph in render
   * @param {Graph} graph The graph to be deleted
   * @return {Undefined}  Void
   */


  CRender.prototype.delGraph = function (graph) {
    if (typeof graph.delProcessor !== 'function') return;
    graph.delProcessor(this);
    this.graphs = this.graphs.filter(function (graph) {
      return graph;
    });
    this.drawAllGraph();
  };
  /**
   * @description        Delete all graph in render
   * @return {Undefined} Void
   */


  CRender.prototype.delAllGraph = function () {
    var _this = this;

    this.graphs.forEach(function (graph) {
      return graph.delProcessor(_this);
    });
    this.graphs = this.graphs.filter(function (graph) {
      return graph;
    });
    this.drawAllGraph();
  };
  /**
   * @description        Draw all the graphs in the render
   * @return {Undefined} Void
   */


  CRender.prototype.drawAllGraph = function () {
    var _this2 = this;

    this.clearArea();
    this.graphs.filter(function (graph) {
      return graph && graph.visible;
    }).forEach(function (graph) {
      return graph.drawProcessor(_this2, graph);
    });
  };
  /**
   * @description      Animate the graph whose animation queue is not empty
   *                   and the animationPause is equal to false
   * @return {Promise} Animation Promise
   */


  CRender.prototype.launchAnimation = function () {
    var _this3 = this;

    var animationStatus = this.animationStatus;
    if (animationStatus) return;
    this.animationStatus = true;
    return new Promise(function (resolve) {
      animation.call(_this3, function () {
        _this3.animationStatus = false;
        resolve();
      }, Date.now());
    });
  };
  /**
   * @description Try to animate every graph
   * @param {Function} callback Callback in animation end
   * @param {Number} timeStamp  Time stamp of animation start
   * @return {Undefined} Void
   */


  function animation(callback, timeStamp) {
    var graphs = this.graphs;

    if (!animationAble(graphs)) {
      callback();
      return;
    }

    graphs.forEach(function (graph) {
      return graph.turnNextAnimationFrame(timeStamp);
    });
    this.drawAllGraph();
    requestAnimationFrame(animation.bind(this, callback, timeStamp));
  }
  /**
   * @description Find if there are graph that can be animated
   * @param {[Graph]} graphs
   * @return {Boolean}
   */


  function animationAble(graphs) {
    return graphs.find(function (graph) {
      return !graph.animationPause && graph.animationFrameState.length;
    });
  }
  /**
   * @description Handler of CRender mousedown event
   * @return {Undefined} Void
   */


  function mouseDown(e) {
    var graphs = this.graphs;
    var hoverGraph = graphs.find(function (graph) {
      return graph.status === 'hover';
    });
    if (!hoverGraph) return;
    hoverGraph.status = 'active';
  }
  /**
   * @description Handler of CRender mousemove event
   * @return {Undefined} Void
   */


  function mouseMove(e) {
    var offsetX = e.offsetX,
        offsetY = e.offsetY;
    var position = [offsetX, offsetY];
    var graphs = this.graphs;
    var activeGraph = graphs.find(function (graph) {
      return graph.status === 'active' || graph.status === 'drag';
    });

    if (activeGraph) {
      if (!activeGraph.drag) return;

      if (typeof activeGraph.move !== 'function') {
        console.error('No move method is provided, cannot be dragged!');
        return;
      }

      activeGraph.moveProcessor(e);
      activeGraph.status = 'drag';
      return;
    }

    var hoverGraph = graphs.find(function (graph) {
      return graph.status === 'hover';
    });
    var hoverAbleGraphs = graphs.filter(function (graph) {
      return graph.hover && (typeof graph.hoverCheck === 'function' || graph.hoverRect);
    });
    var hoveredGraph = hoverAbleGraphs.find(function (graph) {
      return graph.hoverCheckProcessor(position, graph);
    });

    if (hoveredGraph) {
      document.body.style.cursor = hoveredGraph.style.hoverCursor;
    } else {
      document.body.style.cursor = 'default';
    }

    var hoverGraphMouseOuterIsFun = false,
        hoveredGraphMouseEnterIsFun = false;
    if (hoverGraph) hoverGraphMouseOuterIsFun = typeof hoverGraph.mouseOuter === 'function';
    if (hoveredGraph) hoveredGraphMouseEnterIsFun = typeof hoveredGraph.mouseEnter === 'function';
    if (!hoveredGraph && !hoverGraph) return;

    if (!hoveredGraph && hoverGraph) {
      if (hoverGraphMouseOuterIsFun) hoverGraph.mouseOuter(e, hoverGraph);
      hoverGraph.status = 'static';
      return;
    }

    if (hoveredGraph && hoveredGraph === hoverGraph) return;

    if (hoveredGraph && !hoverGraph) {
      if (hoveredGraphMouseEnterIsFun) hoveredGraph.mouseEnter(e, hoveredGraph);
      hoveredGraph.status = 'hover';
      return;
    }

    if (hoveredGraph && hoverGraph && hoveredGraph !== hoverGraph) {
      if (hoverGraphMouseOuterIsFun) hoverGraph.mouseOuter(e, hoverGraph);
      hoverGraph.status = 'static';
      if (hoveredGraphMouseEnterIsFun) hoveredGraph.mouseEnter(e, hoveredGraph);
      hoveredGraph.status = 'hover';
    }
  }
  /**
   * @description Handler of CRender mouseup event
   * @return {Undefined} Void
   */


  function mouseUp(e) {
    var graphs = this.graphs;
    var activeGraph = graphs.find(function (graph) {
      return graph.status === 'active';
    });
    var dragGraph = graphs.find(function (graph) {
      return graph.status === 'drag';
    });
    if (activeGraph && typeof activeGraph.click === 'function') activeGraph.click(e, activeGraph);
    graphs.forEach(function (graph) {
      return graph && (graph.status = 'static');
    });
    if (activeGraph) activeGraph.status = 'hover';
    if (dragGraph) dragGraph.status = 'hover';
  }
  /**
   * @description         Clone Graph
   * @param {Graph} graph The target to be cloned
   * @return {Graph}      Cloned graph
   */


  CRender.prototype.clone = function (graph) {
    var style = graph.style.getStyle();

    var clonedGraph = _objectSpread({}, graph, {
      style: style
    });

    delete clonedGraph.render;
    clonedGraph = (0, util.deepClone)(clonedGraph, true);
    return this.add(clonedGraph);
  };
  });

  unwrapExports(crender_class);

  var lib$3 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  Object.defineProperty(exports, "CRender", {
    enumerable: true,
    get: function get() {
      return _crender["default"];
    }
  });
  Object.defineProperty(exports, "extendNewGraph", {
    enumerable: true,
    get: function get() {
      return graphs_1.extendNewGraph;
    }
  });
  exports["default"] = void 0;

  var _crender = interopRequireDefault(crender_class);



  var _default = _crender["default"];
  exports["default"] = _default;
  });

  var CRender = unwrapExports(lib$3);

  var _defineProperty2 = interopRequireDefault(defineProperty);

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);











  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  var pie = {
    shape: {
      rx: 0,
      ry: 0,
      ir: 0,
      or: 0,
      startAngle: 0,
      endAngle: 0,
      clockWise: true
    },
    validator: function validator(_ref) {
      var shape = _ref.shape;
      var keys = ['rx', 'ry', 'ir', 'or', 'startAngle', 'endAngle'];

      if (keys.find(function (key) {
        return typeof shape[key] !== 'number';
      })) {
        console.error('Pie shape configuration is abnormal!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref2, _ref3) {
      var ctx = _ref2.ctx;
      var shape = _ref3.shape;
      ctx.beginPath();
      var rx = shape.rx,
          ry = shape.ry,
          ir = shape.ir,
          or = shape.or,
          startAngle = shape.startAngle,
          endAngle = shape.endAngle,
          clockWise = shape.clockWise;
      rx = parseInt(rx) + 0.5;
      ry = parseInt(ry) + 0.5;
      ctx.arc(rx, ry, ir > 0 ? ir : 0, startAngle, endAngle, !clockWise);
      var connectPoint1 = (0, util.getCircleRadianPoint)(rx, ry, or, endAngle).map(function (p) {
        return parseInt(p) + 0.5;
      });
      var connectPoint2 = (0, util.getCircleRadianPoint)(rx, ry, ir, startAngle).map(function (p) {
        return parseInt(p) + 0.5;
      });
      ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(connectPoint1));
      ctx.arc(rx, ry, or > 0 ? or : 0, endAngle, startAngle, clockWise);
      ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(connectPoint2));
      ctx.closePath();
      ctx.stroke();
      ctx.fill();
    }
  };
  var agArc = {
    shape: {
      rx: 0,
      ry: 0,
      r: 0,
      startAngle: 0,
      endAngle: 0,
      gradientStartAngle: null,
      gradientEndAngle: null
    },
    validator: function validator(_ref4) {
      var shape = _ref4.shape;
      var keys = ['rx', 'ry', 'r', 'startAngle', 'endAngle'];

      if (keys.find(function (key) {
        return typeof shape[key] !== 'number';
      })) {
        console.error('AgArc shape configuration is abnormal!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref5, _ref6) {
      var ctx = _ref5.ctx;
      var shape = _ref6.shape,
          style = _ref6.style;
      var gradient = style.gradient;
      gradient = gradient.map(function (cv) {
        return (0, lib.getColorFromRgbValue)(cv);
      });

      if (gradient.length === 1) {
        gradient = [gradient[0], gradient[0]];
      }

      var gradientArcNum = gradient.length - 1;
      var gradientStartAngle = shape.gradientStartAngle,
          gradientEndAngle = shape.gradientEndAngle,
          startAngle = shape.startAngle,
          endAngle = shape.endAngle,
          r = shape.r,
          rx = shape.rx,
          ry = shape.ry;
      if (gradientStartAngle === null) gradientStartAngle = startAngle;
      if (gradientEndAngle === null) gradientEndAngle = endAngle;
      var angleGap = (gradientEndAngle - gradientStartAngle) / gradientArcNum;
      if (angleGap === Math.PI * 2) angleGap = Math.PI * 2 - 0.001;

      for (var i = 0; i < gradientArcNum; i++) {
        ctx.beginPath();
        var startPoint = (0, util.getCircleRadianPoint)(rx, ry, r, startAngle + angleGap * i);
        var endPoint = (0, util.getCircleRadianPoint)(rx, ry, r, startAngle + angleGap * (i + 1));
        var color = (0, util$1.getLinearGradientColor)(ctx, startPoint, endPoint, [gradient[i], gradient[i + 1]]);
        var arcStartAngle = startAngle + angleGap * i;
        var arcEndAngle = startAngle + angleGap * (i + 1);
        var doBreak = false;

        if (arcEndAngle > endAngle) {
          arcEndAngle = endAngle;
          doBreak = true;
        }

        ctx.arc(rx, ry, r, arcStartAngle, arcEndAngle);
        ctx.strokeStyle = color;
        ctx.stroke();
        if (doBreak) break;
      }
    }
  };
  var numberText = {
    shape: {
      number: [],
      content: '',
      position: [0, 0],
      toFixed: 0,
      rowGap: 0,
      formatter: null
    },
    validator: function validator(_ref7) {
      var shape = _ref7.shape;
      var number = shape.number,
          content = shape.content,
          position = shape.position;

      if (!(number instanceof Array) || typeof content !== 'string' || !(position instanceof Array)) {
        console.error('NumberText shape configuration is abnormal!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref8, _ref9) {
      var ctx = _ref8.ctx;
      var shape = _ref9.shape;
      var number = shape.number,
          content = shape.content,
          toFixed = shape.toFixed,
          rowGap = shape.rowGap,
          formatter = shape.formatter;
      var textSegments = content.split('{nt}');
      var textString = '';
      textSegments.forEach(function (t, i) {
        var currentNumber = number[i] || '';

        if (typeof currentNumber === 'number') {
          currentNumber = currentNumber.toFixed(toFixed);
          if (typeof formatter === 'function') currentNumber = formatter(currentNumber);
        }

        textString += t + (currentNumber || '');
      });

      graphs_1.text.draw({
        ctx: ctx
      }, {
        shape: _objectSpread({}, shape, {
          content: textString,
          rowGap: rowGap
        })
      });
    }
  };
  var lineIcon = {
    shape: {
      x: 0,
      y: 0,
      w: 0,
      h: 0
    },
    validator: function validator(_ref10) {
      var shape = _ref10.shape;
      var x = shape.x,
          y = shape.y,
          w = shape.w,
          h = shape.h;

      if (typeof x !== 'number' || typeof y !== 'number' || typeof w !== 'number' || typeof h !== 'number') {
        console.error('lineIcon shape configuration is abnormal!');
        return false;
      }

      return true;
    },
    draw: function draw(_ref11, _ref12) {
      var ctx = _ref11.ctx;
      var shape = _ref12.shape;
      ctx.beginPath();
      var x = shape.x,
          y = shape.y,
          w = shape.w,
          h = shape.h;
      var halfH = h / 2;
      ctx.strokeStyle = ctx.fillStyle;
      ctx.moveTo(x, y + halfH);
      ctx.lineTo(x + w, y + halfH);
      ctx.lineWidth = 1;
      ctx.stroke();
      ctx.beginPath();
      var radius = halfH - 5 * 2;
      if (radius <= 0) radius = 3;
      ctx.arc(x + w / 2, y + halfH, radius, 0, Math.PI * 2);
      ctx.lineWidth = 5;
      ctx.stroke();
      ctx.fillStyle = '#fff';
      ctx.fill();
    },
    hoverCheck: function hoverCheck(position, _ref13) {
      var shape = _ref13.shape;
      var x = shape.x,
          y = shape.y,
          w = shape.w,
          h = shape.h;
      return (0, util.checkPointIsInRect)(position, x, y, w, h);
    },
    setGraphCenter: function setGraphCenter(e, _ref14) {
      var shape = _ref14.shape,
          style = _ref14.style;
      var x = shape.x,
          y = shape.y,
          w = shape.w,
          h = shape.h;
      style.graphCenter = [x + w / 2, y + h / 2];
    }
  };
  (0, lib$3.extendNewGraph)('pie', pie);
  (0, lib$3.extendNewGraph)('agArc', agArc);
  (0, lib$3.extendNewGraph)('numberText', numberText);
  (0, lib$3.extendNewGraph)('lineIcon', lineIcon);

  var color = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.colorConfig = void 0;
  var colorConfig = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e062ae', '#e690d1', '#e7bcf3', '#9d96f5', '#8378ea', '#96bfff'];
  exports.colorConfig = colorConfig;
  });

  unwrapExports(color);
  var color_1 = color.colorConfig;

  var grid = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.gridConfig = void 0;
  var gridConfig = {
    /**
     * @description Grid left margin
     * @type {String|Number}
     * @default left = '10%'
     * @example left = '10%' | 10
     */
    left: '10%',

    /**
     * @description Grid right margin
     * @type {String|Number}
     * @default right = '10%'
     * @example right = '10%' | 10
     */
    right: '10%',

    /**
     * @description Grid top margin
     * @type {String|Number}
     * @default top = 60
     * @example top = '10%' | 60
     */
    top: 60,

    /**
     * @description Grid bottom margin
     * @type {String|Number}
     * @default bottom = 60
     * @example bottom = '10%' | 60
     */
    bottom: 60,

    /**
     * @description Grid default style configuration
     * @type {Object}
     * @default style = {Configuration Of Class Style}
     */
    style: {
      fill: 'rgba(0, 0, 0, 0)'
    },

    /**
     * @description Grid render level
     * Priority rendering high level
     * @type {Number}
     * @default rLevel = -30
     */
    rLevel: -30,

    /**
     * @description Grid animation curve
     * @type {String}
     * @default animationCurve = 'easeOutCubic'
     */
    animationCurve: 'easeOutCubic',

    /**
     * @description Grid animation frame
     * @type {Number}
     * @default animationFrame = 50
     */
    animationFrame: 30
  };
  exports.gridConfig = gridConfig;
  });

  unwrapExports(grid);
  var grid_1 = grid.gridConfig;

  var axis = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.yAxisConfig = exports.xAxisConfig = void 0;
  var xAxisConfig = {
    /**
     * @description Axis name
     * @type {String}
     * @default name = ''
     */
    name: '',

    /**
     * @description Whether to display this axis
     * @type {Boolean}
     * @default show = true
     */
    show: true,

    /**
     * @description Axis position
     * @type {String}
     * @default position = 'bottom'
     * @example position = 'bottom' | 'top'
     */
    position: 'bottom',

    /**
     * @description Name gap
     * @type {Number}
     * @default nameGap = 15
     */
    nameGap: 15,

    /**
     * @description Name location
     * @type {String}
     * @default nameLocation = 'end'
     * @example nameLocation = 'end' | 'center' | 'start'
     */
    nameLocation: 'end',

    /**
     * @description Name default style configuration
     * @type {Object}
     * @default style = {Configuration Of Class Style}
     */
    nameTextStyle: {
      fill: '#333',
      fontSize: 10
    },

    /**
     * @description Axis min value
     * @type {String|Number}
     * @default min = '20%'
     * @example min = '20%' | 0
     */
    min: '20%',

    /**
     * @description Axis max value
     * @type {String|Number}
     * @default max = '20%'
     * @example max = '20%' | 0
     */
    max: '20%',

    /**
     * @description Axis value interval
     * @type {Number}
     * @default interval = null
     * @example interval = 100
     */
    interval: null,

    /**
     * @description Min interval
     * @type {Number}
     * @default minInterval = null
     * @example minInterval = 1
     */
    minInterval: null,

    /**
     * @description Max interval
     * @type {Number}
     * @default maxInterval = null
     * @example maxInterval = 100
     */
    maxInterval: null,

    /**
     * @description Boundary gap
     * @type {Boolean}
     * @default boundaryGap = null
     * @example boundaryGap = true
     */
    boundaryGap: null,

    /**
     * @description Axis split number
     * @type {Number}
     * @default splitNumber = 5
     */
    splitNumber: 5,

    /**
     * @description Axis line configuration
     * @type {Object}
     */
    axisLine: {
      /**
       * @description Whether to display axis line
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Axis line default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        stroke: '#333',
        lineWidth: 1
      }
    },

    /**
     * @description Axis tick configuration
     * @type {Object}
     */
    axisTick: {
      /**
       * @description Whether to display axis tick
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Axis tick default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        stroke: '#333',
        lineWidth: 1
      }
    },

    /**
     * @description Axis label configuration
     * @type {Object}
     */
    axisLabel: {
      /**
       * @description Whether to display axis label
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Axis label formatter
       * @type {String|Function}
       * @default formatter = null
       * @example formatter = '{value}件'
       * @example formatter = (dataItem) => (dataItem.value)
       */
      formatter: null,

      /**
       * @description Axis label default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        fill: '#333',
        fontSize: 10,
        rotate: 0
      }
    },

    /**
     * @description Axis split line configuration
     * @type {Object}
     */
    splitLine: {
      /**
       * @description Whether to display axis split line
       * @type {Boolean}
       * @default show = false
       */
      show: false,

      /**
       * @description Axis split line default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        stroke: '#d4d4d4',
        lineWidth: 1
      }
    },

    /**
     * @description X axis render level
     * Priority rendering high level
     * @type {Number}
     * @default rLevel = -20
     */
    rLevel: -20,

    /**
     * @description X axis animation curve
     * @type {String}
     * @default animationCurve = 'easeOutCubic'
     */
    animationCurve: 'easeOutCubic',

    /**
     * @description X axis animation frame
     * @type {Number}
     * @default animationFrame = 50
     */
    animationFrame: 50
  };
  exports.xAxisConfig = xAxisConfig;
  var yAxisConfig = {
    /**
     * @description Axis name
     * @type {String}
     * @default name = ''
     */
    name: '',

    /**
     * @description Whether to display this axis
     * @type {Boolean}
     * @default show = true
     */
    show: true,

    /**
     * @description Axis position
     * @type {String}
     * @default position = 'left'
     * @example position = 'left' | 'right'
     */
    position: 'left',

    /**
     * @description Name gap
     * @type {Number}
     * @default nameGap = 15
     */
    nameGap: 15,

    /**
     * @description Name location
     * @type {String}
     * @default nameLocation = 'end'
     * @example nameLocation = 'end' | 'center' | 'start'
     */
    nameLocation: 'end',

    /**
     * @description name default style configuration
     * @type {Object}
     * @default style = {Configuration Of Class Style}
     */
    nameTextStyle: {
      fill: '#333',
      fontSize: 10
    },

    /**
     * @description Axis min value
     * @type {String|Number}
     * @default min = '20%'
     * @example min = '20%' | 0
     */
    min: '20%',

    /**
     * @description Axis max value
     * @type {String|Number}
     * @default max = '20%'
     * @example max = '20%' | 0
     */
    max: '20%',

    /**
     * @description Axis value interval
     * @type {Number}
     * @default interval = null
     * @example interval = 100
     */
    interval: null,

    /**
     * @description Min interval
     * @type {Number}
     * @default minInterval = null
     * @example minInterval = 1
     */
    minInterval: null,

    /**
     * @description Max interval
     * @type {Number}
     * @default maxInterval = null
     * @example maxInterval = 100
     */
    maxInterval: null,

    /**
     * @description Boundary gap
     * @type {Boolean}
     * @default boundaryGap = null
     * @example boundaryGap = true
     */
    boundaryGap: null,

    /**
     * @description Axis split number
     * @type {Number}
     * @default splitNumber = 5
     */
    splitNumber: 5,

    /**
     * @description Axis line configuration
     * @type {Object}
     */
    axisLine: {
      /**
       * @description Whether to display axis line
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Axis line default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        stroke: '#333',
        lineWidth: 1
      }
    },

    /**
     * @description Axis tick configuration
     * @type {Object}
     */
    axisTick: {
      /**
       * @description Whether to display axis tick
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Axis tick default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        stroke: '#333',
        lineWidth: 1
      }
    },

    /**
     * @description Axis label configuration
     * @type {Object}
     */
    axisLabel: {
      /**
       * @description Whether to display axis label
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Axis label formatter
       * @type {String|Function}
       * @default formatter = null
       * @example formatter = '{value}件'
       * @example formatter = (dataItem) => (dataItem.value)
       */
      formatter: null,

      /**
       * @description Axis label default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        fill: '#333',
        fontSize: 10,
        rotate: 0
      }
    },

    /**
     * @description Axis split line configuration
     * @type {Object}
     */
    splitLine: {
      /**
       * @description Whether to display axis split line
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Axis split line default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        stroke: '#d4d4d4',
        lineWidth: 1
      }
    },

    /**
     * @description Y axis render level
     * Priority rendering high level
     * @type {Number}
     * @default rLevel = -20
     */
    rLevel: -20,

    /**
     * @description Y axis animation curve
     * @type {String}
     * @default animationCurve = 'easeOutCubic'
     */
    animationCurve: 'easeOutCubic',

    /**
     * @description Y axis animation frame
     * @type {Number}
     * @default animationFrame = 50
     */
    animationFrame: 50
  };
  exports.yAxisConfig = yAxisConfig;
  });

  unwrapExports(axis);
  var axis_1 = axis.yAxisConfig;
  var axis_2 = axis.xAxisConfig;

  var title = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.titleConfig = void 0;
  var titleConfig = {
    /**
     * @description Whether to display title
     * @type {Boolean}
     * @default show = true
     */
    show: true,

    /**
     * @description Title text
     * @type {String}
     * @default text = ''
     */
    text: '',

    /**
     * @description Title offset
     * @type {Array}
     * @default offset = [0, -20]
     */
    offset: [0, -20],

    /**
     * @description Title default style configuration
     * @type {Object}
     * @default style = {Configuration Of Class Style}
     */
    style: {
      fill: '#333',
      fontSize: 17,
      fontWeight: 'bold',
      textAlign: 'center',
      textBaseline: 'bottom'
    },

    /**
     * @description Title render level
     * Priority rendering high level
     * @type {Number}
     * @default rLevel = 20
     */
    rLevel: 20,

    /**
     * @description Title animation curve
     * @type {String}
     * @default animationCurve = 'easeOutCubic'
     */
    animationCurve: 'easeOutCubic',

    /**
     * @description Title animation frame
     * @type {Number}
     * @default animationFrame = 50
     */
    animationFrame: 50
  };
  exports.titleConfig = titleConfig;
  });

  unwrapExports(title);
  var title_1 = title.titleConfig;

  var line = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.lineConfig = void 0;
  var lineConfig = {
    /**
     * @description Whether to display this line chart
     * @type {Boolean}
     * @default show = true
     */
    show: true,

    /**
     * @description Legend name
     * @type {String}
     * @default name = ''
     */
    name: '',

    /**
     * @description Data stacking
     * The data value of the series element of the same stack
     * will be superimposed (the latter value will be superimposed on the previous value)
     * @type {String}
     * @default stack = ''
     */
    stack: '',

    /**
     * @description Smooth line
     * @type {Boolean}
     * @default smooth = false
     */
    smooth: false,

    /**
     * @description Line x axis index
     * @type {Number}
     * @default xAxisIndex = 0
     * @example xAxisIndex = 0 | 1
     */
    xAxisIndex: 0,

    /**
     * @description Line y axis index
     * @type {Number}
     * @default yAxisIndex = 0
     * @example yAxisIndex = 0 | 1
     */
    yAxisIndex: 0,

    /**
     * @description Line chart data
     * @type {Array}
     * @default data = []
     * @example data = [100, 200, 300]
     */
    data: [],

    /**
     * @description Line default style configuration
     * @type {Object}
     * @default style = {Configuration Of Class Style}
     */
    lineStyle: {
      lineWidth: 1
    },

    /**
     * @description Line point configuration
     * @type {Object}
     */
    linePoint: {
      /**
       * @description Whether to display line point
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Line point radius
       * @type {Number}
       * @default radius = 2
       */
      radius: 2,

      /**
       * @description Line point default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        fill: '#fff',
        lineWidth: 1
      }
    },

    /**
     * @description Line area configuration
     * @type {Object}
     */
    lineArea: {
      /**
       * @description Whether to display line area
       * @type {Boolean}
       * @default show = false
       */
      show: false,

      /**
       * @description Line area gradient color (Hex|rgb|rgba)
       * @type {Array}
       * @default gradient = []
       */
      gradient: [],

      /**
       * @description Line area style default configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        opacity: 0.5
      }
    },

    /**
     * @description Line label configuration
     * @type {Object}
     */
    label: {
      /**
       * @description Whether to display line label
       * @type {Boolean}
       * @default show = false
       */
      show: false,

      /**
       * @description Line label position
       * @type {String}
       * @default position = 'top'
       * @example position = 'top' | 'center' | 'bottom'
       */
      position: 'top',

      /**
       * @description Line label offset
       * @type {Array}
       * @default offset = [0, -10]
       */
      offset: [0, -10],

      /**
       * @description Line label formatter
       * @type {String|Function}
       * @default formatter = null
       * @example formatter = '{value}件'
       * @example formatter = (dataItem) => (dataItem.value)
       */
      formatter: null,

      /**
       * @description Line label default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        fontSize: 10
      }
    },

    /**
     * @description Line chart render level
     * Priority rendering high level
     * @type {Number}
     * @default rLevel = 10
     */
    rLevel: 10,

    /**
     * @description Line animation curve
     * @type {String}
     * @default animationCurve = 'easeOutCubic'
     */
    animationCurve: 'easeOutCubic',

    /**
     * @description Line animation frame
     * @type {Number}
     * @default animationFrame = 50
     */
    animationFrame: 50
  };
  exports.lineConfig = lineConfig;
  });

  unwrapExports(line);
  var line_1 = line.lineConfig;

  var bar = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.barConfig = void 0;
  var barConfig = {
    /**
     * @description Whether to display this bar chart
     * @type {Boolean}
     * @default show = true
     */
    show: true,

    /**
     * @description Legend name
     * @type {String}
     * @default name = ''
     */
    name: '',

    /**
     * @description Data stacking
     * The data value of the series element of the same stack
     * will be superimposed (the latter value will be superimposed on the previous value)
     * @type {String}
     * @default stack = ''
     */
    stack: '',

    /**
     * @description Bar shape type
     * @type {String}
     * @default shapeType = 'normal'
     * @example shapeType = 'normal' | 'leftEchelon' | 'rightEchelon'
     */
    shapeType: 'normal',

    /**
     * @description Echelon bar sharpness offset
     * @type {Number}
     * @default echelonOffset = 10
     */
    echelonOffset: 10,

    /**
     * @description Bar width
     * This property should be set on the last 'bar' series
     * in this coordinate system to take effect and will be in effect
     * for all 'bar' series in this coordinate system
     * @type {String|Number}
     * @default barWidth = 'auto'
     * @example barWidth = 'auto' | '10%' | 20
     */
    barWidth: 'auto',

    /**
     * @description Bar gap
     * This property should be set on the last 'bar' series
     * in this coordinate system to take effect and will be in effect
     * for all 'bar' series in this coordinate system
     * @type {String|Number}
     * @default barGap = '30%'
     * @example barGap = '30%' | 30
     */
    barGap: '30%',

    /**
     * @description Bar category gap
     * This property should be set on the last 'bar' series
     * in this coordinate system to take effect and will be in effect
     * for all 'bar' series in this coordinate system
     * @type {String|Number}
     * @default barCategoryGap = '20%'
     * @example barCategoryGap = '20%' | 20
     */
    barCategoryGap: '20%',

    /**
     * @description Bar x axis index
     * @type {Number}
     * @default xAxisIndex = 0
     * @example xAxisIndex = 0 | 1
     */
    xAxisIndex: 0,

    /**
     * @description Bar y axis index
     * @type {Number}
     * @default yAxisIndex = 0
     * @example yAxisIndex = 0 | 1
     */
    yAxisIndex: 0,

    /**
     * @description Bar chart data
     * @type {Array}
     * @default data = []
     * @example data = [100, 200, 300]
     */
    data: [],

    /**
     * @description Background bar configuration
     * @type {Object}
     */
    backgroundBar: {
      /**
       * @description Whether to display background bar
       * @type {Boolean}
       * @default show = false
       */
      show: false,

      /**
       * @description Background bar width
       * @type {String|Number}
       * @default width = 'auto'
       * @example width = 'auto' | '30%' | 30
       */
      width: 'auto',

      /**
       * @description Background bar default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        fill: 'rgba(200, 200, 200, .4)'
      }
    },

    /**
     * @description Bar label configuration
     * @type {Object}
     */
    label: {
      /**
       * @description Whether to display bar label
       * @type {Boolean}
       * @default show = false
       */
      show: false,

      /**
       * @description Bar label position
       * @type {String}
       * @default position = 'top'
       * @example position = 'top' | 'center' | 'bottom'
       */
      position: 'top',

      /**
       * @description Bar label offset
       * @type {Array}
       * @default offset = [0, -10]
       */
      offset: [0, -10],

      /**
       * @description Bar label formatter
       * @type {String|Function}
       * @default formatter = null
       * @example formatter = '{value}件'
       * @example formatter = (dataItem) => (dataItem.value)
       */
      formatter: null,

      /**
       * @description Bar label default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        fontSize: 10
      }
    },

    /**
     * @description Bar gradient configuration
     * @type {Object}
     */
    gradient: {
      /**
       * @description Gradient color (Hex|rgb|rgba)
       * @type {Array}
       * @default color = []
       */
      color: [],

      /**
       * @description Local gradient
       * @type {Boolean}
       * @default local = true
       */
      local: true
    },

    /**
     * @description Bar style default configuration
     * @type {Object}
     * @default style = {Configuration Of Class Style}
     */
    barStyle: {},

    /**
     * @description Independent color mode
     * When set to true, independent color mode is enabled
     * @type {Boolean}
     * @default independentColor = false
     */
    independentColor: false,

    /**
     * @description Independent colors
     * Only effective when independent color mode is enabled
     * Default value is the same as the color in the root configuration
     * Two-dimensional color array can produce gradient colors
     * @type {Array}
     * @example independentColor = ['#fff', '#000']
     * @example independentColor = [['#fff', '#000'], '#000']
     */
    independentColors: [],

    /**
     * @description Bar chart render level
     * Priority rendering high level
     * @type {Number}
     * @default rLevel = 0
     */
    rLevel: 0,

    /**
     * @description Bar animation curve
     * @type {String}
     * @default animationCurve = 'easeOutCubic'
     */
    animationCurve: 'easeOutCubic',

    /**
     * @description Bar animation frame
     * @type {Number}
     * @default animationFrame = 50
     */
    animationFrame: 50
  };
  exports.barConfig = barConfig;
  });

  unwrapExports(bar);
  var bar_1 = bar.barConfig;

  var pie$1 = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.pieConfig = void 0;
  var pieConfig = {
    /**
     * @description Whether to display this pie chart
     * @type {Boolean}
     * @default show = true
     */
    show: true,

    /**
     * @description Legend name
     * @type {String}
     * @default name = ''
     */
    name: '',

    /**
     * @description Radius of pie
     * @type {String|Number}
     * @default radius = '50%'
     * @example radius = '50%' | 100
     */
    radius: '50%',

    /**
     * @description Center point of pie
     * @type {Array}
     * @default center = ['50%','50%']
     * @example center = ['50%','50%'] | [100, 100]
     */
    center: ['50%', '50%'],

    /**
     * @description Pie chart start angle
     * @type {Number}
     * @default startAngle = -Math.PI / 2
     * @example startAngle = -Math.PI
     */
    startAngle: -Math.PI / 2,

    /**
     * @description Whether to enable rose type
     * @type {Boolean}
     * @default roseType = false
     */
    roseType: false,

    /**
     * @description Automatic sorting in rose type
     * @type {Boolean}
     * @default roseSort = true
     */
    roseSort: true,

    /**
     * @description Rose radius increasing
     * @type {String|Number}
     * @default roseIncrement = 'auto'
     * @example roseIncrement = 'auto' | '10%' | 10
     */
    roseIncrement: 'auto',

    /**
     * @description Pie chart data
     * @type {Array}
     * @default data = []
     */
    data: [],

    /**
     * @description Pie inside label configuration
     * @type {Object}
     */
    insideLabel: {
      /**
       * @description Whether to display inside label
       * @type {Boolean}
       * @default show = false
       */
      show: false,

      /**
       * @description Label formatter
       * @type {String|Function}
       * @default formatter = '{percent}%'
       * @example formatter = '${name}-{value}-{percent}%'
       * @example formatter = (dataItem) => (dataItem.name)
       */
      formatter: '{percent}%',

      /**
       * @description Label default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        fontSize: 10,
        fill: '#fff',
        textAlign: 'center',
        textBaseline: 'middle'
      }
    },

    /**
     * @description Pie Outside label configuration
     * @type {Object}
     */
    outsideLabel: {
      /**
       * @description Whether to display outside label
       * @type {Boolean}
       * @default show = false
       */
      show: true,

      /**
       * @description Label formatter
       * @type {String|Function}
       * @default formatter = '{name}'
       * @example formatter = '${name}-{value}-{percent}%'
       * @example formatter = (dataItem) => (dataItem.name)
       */
      formatter: '{name}',

      /**
       * @description Label default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        fontSize: 11
      },

      /**
       * @description Gap beteen label line bended place and pie
       * @type {String|Number}
       * @default labelLineBendGap = '20%'
       * @example labelLineBendGap = '20%' | 20
       */
      labelLineBendGap: '20%',

      /**
       * @description Label line end length
       * @type {Number}
       * @default labelLineEndLength = 50
       */
      labelLineEndLength: 50,

      /**
       * @description Label line default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      labelLineStyle: {
        lineWidth: 1
      }
    },

    /**
     * @description Pie default style configuration
     * @type {Object}
     * @default style = {Configuration Of Class Style}
     */
    pieStyle: {},

    /**
     * @description Percentage fractional precision
     * @type {Number}
     * @default percentToFixed = 0
     */
    percentToFixed: 0,

    /**
     * @description Pie chart render level
     * Priority rendering high level
     * @type {Number}
     * @default rLevel = 10
     */
    rLevel: 10,

    /**
     * @description Animation delay gap
     * @type {Number}
     * @default animationDelayGap = 60
     */
    animationDelayGap: 60,

    /**
     * @description Pie animation curve
     * @type {String}
     * @default animationCurve = 'easeOutCubic'
     */
    animationCurve: 'easeOutCubic',

    /**
     * @description Pie start animation curve
     * @type {String}
     * @default startAnimationCurve = 'easeOutBack'
     */
    startAnimationCurve: 'easeOutBack',

    /**
     * @description Pie animation frame
     * @type {Number}
     * @default animationFrame = 50
     */
    animationFrame: 50
  };
  exports.pieConfig = pieConfig;
  });

  unwrapExports(pie$1);
  var pie_1 = pie$1.pieConfig;

  var radarAxis = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.radarAxisConfig = void 0;
  var radarAxisConfig = {
    /**
     * @description Whether to display this radar axis
     * @type {Boolean}
     * @default show = true
     */
    show: true,

    /**
     * @description Center point of radar axis
     * @type {Array}
     * @default center = ['50%','50%']
     * @example center = ['50%','50%'] | [100, 100]
     */
    center: ['50%', '50%'],

    /**
     * @description Radius of radar axis
     * @type {String|Number}
     * @default radius = '65%'
     * @example radius = '65%' | 100
     */
    radius: '65%',

    /**
     * @description Radar axis start angle
     * @type {Number}
     * @default startAngle = -Math.PI / 2
     * @example startAngle = -Math.PI
     */
    startAngle: -Math.PI / 2,

    /**
     * @description Radar axis split number
     * @type {Number}
     * @default splitNum = 5
     */
    splitNum: 5,

    /**
     * @description Whether to enable polygon radar axis
     * @type {Boolean}
     * @default polygon = false
     */
    polygon: false,

    /**
     * @description Axis label configuration
     * @type {Object}
     */
    axisLabel: {
      /**
       * @description Whether to display axis label
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Label gap between label and radar axis
       * @type {Number}
       * @default labelGap = 15
       */
      labelGap: 15,

      /**
       * @description Label color (Hex|rgb|rgba), will cover style.fill
       * @type {Array}
       * @default color = []
       */
      color: [],

      /**
       * @description Axis label default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        fill: '#333'
      }
    },

    /**
     * @description Axis line configuration
     * @type {Object}
     */
    axisLine: {
      /**
       * @description Whether to display axis line
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Line color (Hex|rgb|rgba), will cover style.stroke
       * @type {Array}
       * @default color = []
       */
      color: [],

      /**
       * @description Axis label default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        stroke: '#999',
        lineWidth: 1
      }
    },

    /**
     * @description Split line configuration
     * @type {Object}
     */
    splitLine: {
      /**
       * @description Whether to display split line
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Line color (Hex|rgb|rgba), will cover style.stroke
       * @type {Array}
       * @default color = []
       */
      color: [],

      /**
       * @description Split line default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        stroke: '#d4d4d4',
        lineWidth: 1
      }
    },

    /**
     * @description Split area configuration
     * @type {Object}
     */
    splitArea: {
      /**
       * @description Whether to display split area
       * @type {Boolean}
       * @default show = false
       */
      show: false,

      /**
       * @description Area color (Hex|rgb|rgba), will cover style.stroke
       * @type {Array}
       * @default color = []
       */
      color: ['#f5f5f5', '#e6e6e6'],

      /**
       * @description Split area default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {}
    },

    /**
     * @description Bar chart render level
     * Priority rendering high level
     * @type {Number}
     * @default rLevel = -10
     */
    rLevel: -10,

    /**
     * @description Radar axis animation curve
     * @type {String}
     * @default animationCurve = 'easeOutCubic'
     */
    animationCurve: 'easeOutCubic',

    /**
     * @description Radar axis animation frame
     * @type {Number}
     * @default animationFrame = 50
     */
    animationFrane: 50
  };
  exports.radarAxisConfig = radarAxisConfig;
  });

  unwrapExports(radarAxis);
  var radarAxis_1 = radarAxis.radarAxisConfig;

  var radar = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.radarConfig = void 0;
  var radarConfig = {
    /**
     * @description Whether to display this radar
     * @type {Boolean}
     * @default show = true
     */
    show: true,

    /**
     * @description Legend name
     * @type {String}
     * @default name = ''
     */
    name: '',

    /**
     * @description Radar chart data
     * @type {Array}
     * @default data = []
     * @example data = [100, 200, 300]
     */
    data: [],

    /**
     * @description Radar default style configuration
     * @type {Object}
     * @default style = {Configuration Of Class Style}
     */
    radarStyle: {
      lineWidth: 1
    },

    /**
     * @description Radar point configuration
     * @type {Object}
     */
    point: {
      /**
       * @description Whether to display radar point
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Point radius
       * @type {Number}
       * @default radius = 2
       */
      radius: 2,

      /**
       * @description Radar point default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        fill: '#fff'
      }
    },

    /**
     * @description Radar label configuration
     * @type {Object}
     */
    label: {
      /**
       * @description Whether to display radar label
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Label position offset
       * @type {Array}
       * @default offset = [0, 0]
       */
      offset: [0, 0],

      /**
       * @description Label gap between label and radar
       * @type {Number}
       * @default labelGap = 5
       */
      labelGap: 5,

      /**
       * @description Label formatter
       * @type {String|Function}
       * @default formatter = null
       * @example formatter = 'Score-{value}'
       * @example formatter = (label) => (label)
       */
      formatter: null,

      /**
       * @description Radar label default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        fontSize: 10
      }
    },

    /**
     * @description Radar chart render level
     * Priority rendering high level
     * @type {Number}
     * @default rLevel = 10
     */
    rLevel: 10,

    /**
     * @description Radar animation curve
     * @type {String}
     * @default animationCurve = 'easeOutCubic'
     */
    animationCurve: 'easeOutCubic',

    /**
     * @description Radar animation frame
     * @type {Number}
     * @default animationFrame = 50
     */
    animationFrane: 50
  };
  exports.radarConfig = radarConfig;
  });

  unwrapExports(radar);
  var radar_1 = radar.radarConfig;

  var gauge = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.gaugeConfig = void 0;
  var gaugeConfig = {
    /**
     * @description Whether to display this gauge
     * @type {Boolean}
     * @default show = true
     */
    show: true,

    /**
     * @description Legend name
     * @type {String}
     * @default name = ''
     */
    name: '',

    /**
     * @description Radius of gauge
     * @type {String|Number}
     * @default radius = '60%'
     * @example radius = '60%' | 100
     */
    radius: '60%',

    /**
     * @description Center point of gauge
     * @type {Array}
     * @default center = ['50%','50%']
     * @example center = ['50%','50%'] | [100, 100]
     */
    center: ['50%', '50%'],

    /**
     * @description Gauge start angle
     * @type {Number}
     * @default startAngle = -(Math.PI / 4) * 5
     * @example startAngle = -Math.PI
     */
    startAngle: -(Math.PI / 4) * 5,

    /**
     * @description Gauge end angle
     * @type {Number}
     * @default endAngle = Math.PI / 4
     * @example endAngle = 0
     */
    endAngle: Math.PI / 4,

    /**
     * @description Gauge min value
     * @type {Number}
     * @default min = 0
     */
    min: 0,

    /**
     * @description Gauge max value
     * @type {Number}
     * @default max = 100
     */
    max: 100,

    /**
     * @description Gauge split number
     * @type {Number}
     * @default splitNum = 5
     */
    splitNum: 5,

    /**
     * @description Gauge arc line width
     * @type {Number}
     * @default arcLineWidth = 15
     */
    arcLineWidth: 15,

    /**
     * @description Gauge chart data
     * @type {Array}
     * @default data = []
     */
    data: [],

    /**
     * @description Data item arc default style configuration
     * @type {Object}
     * @default dataItemStyle = {Configuration Of Class Style}
     */
    dataItemStyle: {},

    /**
     * @description Axis tick configuration
     * @type {Object}
     */
    axisTick: {
      /**
       * @description Whether to display axis tick
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Axis tick length
       * @type {Number}
       * @default tickLength = 6
       */
      tickLength: 6,

      /**
       * @description Axis tick default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        stroke: '#999',
        lineWidth: 1
      }
    },

    /**
     * @description Axis label configuration
     * @type {Object}
     */
    axisLabel: {
      /**
       * @description Whether to display axis label
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Axis label data (Can be calculated automatically)
       * @type {Array}
       * @default data = [Number...]
       */
      data: [],

      /**
       * @description Axis label formatter
       * @type {String|Function}
       * @default formatter = null
       * @example formatter = '{value}%'
       * @example formatter = (labelItem) => (labelItem.value)
       */
      formatter: null,

      /**
       * @description Axis label gap between label and axis tick
       * @type {String|Function}
       * @default labelGap = 5
       */
      labelGap: 5,

      /**
       * @description Axis label default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {}
    },

    /**
     * @description Gauge pointer configuration
     * @type {Object}
     */
    pointer: {
      /**
       * @description Whether to display pointer
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Pointer value index of data
       * @type {Number}
       * @default valueIndex = 0 (pointer.value = data[0].value)
       */
      valueIndex: 0,

      /**
       * @description Pointer default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        scale: [1, 1],
        fill: '#fb7293'
      }
    },

    /**
     * @description Data item arc detail configuration
     * @type {Object}
     */
    details: {
      /**
       * @description Whether to display details
       * @type {Boolean}
       * @default show = false
       */
      show: false,

      /**
       * @description Details formatter
       * @type {String|Function}
       * @default formatter = null
       * @example formatter = '{value}%'
       * @example formatter = '{name}%'
       * @example formatter = (dataItem) => (dataItem.value)
       */
      formatter: null,

      /**
       * @description Details position offset
       * @type {Array}
       * @default offset = [0, 0]
       * @example offset = [10, 10]
       */
      offset: [0, 0],

      /**
       * @description Value fractional precision
       * @type {Number}
       * @default valueToFixed = 0
       */
      valueToFixed: 0,

      /**
       * @description Details position
       * @type {String}
       * @default position = 'center'
       * @example position = 'start' | 'center' | 'end'
       */
      position: 'center',

      /**
       * @description Details default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        fontSize: 20,
        fontWeight: 'bold',
        textAlign: 'center',
        textBaseline: 'middle'
      }
    },

    /**
     * @description Gauge background arc configuration
     * @type {Object}
     */
    backgroundArc: {
      /**
       * @description Whether to display background arc
       * @type {Boolean}
       * @default show = true
       */
      show: true,

      /**
       * @description Background arc default style configuration
       * @type {Object}
       * @default style = {Configuration Of Class Style}
       */
      style: {
        stroke: '#e0e0e0'
      }
    },

    /**
     * @description Gauge chart render level
     * Priority rendering high level
     * @type {Number}
     * @default rLevel = 10
     */
    rLevel: 10,

    /**
     * @description Gauge animation curve
     * @type {String}
     * @default animationCurve = 'easeOutCubic'
     */
    animationCurve: 'easeOutCubic',

    /**
     * @description Gauge animation frame
     * @type {Number}
     * @default animationFrame = 50
     */
    animationFrame: 50
  };
  exports.gaugeConfig = gaugeConfig;
  });

  unwrapExports(gauge);
  var gauge_1 = gauge.gaugeConfig;

  var legend = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.legendConfig = void 0;
  var legendConfig = {
    /**
     * @description Whether to display legend
     * @type {Boolean}
     * @default show = true
     */
    show: true,

    /**
     * @description Legend orient
     * @type {String}
     * @default orient = 'horizontal'
     * @example orient = 'horizontal' | 'vertical'
     */
    orient: 'horizontal',

    /**
     * @description Legend left
     * @type {String|Number}
     * @default left = 'auto'
     * @example left = 'auto' | '10%' | 10
     */
    left: 'auto',

    /**
     * @description Legend right
     * @type {String|Number}
     * @default right = 'auto'
     * @example right = 'auto' | '10%' | 10
     */
    right: 'auto',

    /**
     * @description Legend top
     * @type {String|Number}
     * @default top = 'auto'
     * @example top = 'auto' | '10%' | 10
     */
    top: 'auto',

    /**
     * @description Legend bottom
     * @type {String|Number}
     * @default bottom = 'auto'
     * @example bottom = 'auto' | '10%' | 10
     */
    bottom: 'auto',

    /**
     * @description Legend item gap
     * @type {Number}
     * @default itemGap = 10
     */
    itemGap: 10,

    /**
     * @description Icon width
     * @type {Number}
     * @default iconWidth = 25
     */
    iconWidth: 25,

    /**
     * @description Icon height
     * @type {Number}
     * @default iconHeight = 10
     */
    iconHeight: 10,

    /**
     * @description Whether legend is optional
     * @type {Boolean}
     * @default selectAble = true
     */
    selectAble: true,

    /**
     * @description Legend data
     * @type {Array}
     * @default data = []
     */
    data: [],

    /**
     * @description Legend text default style configuration
     * @type {Object}
     * @default style = {Configuration Of Class Style}
     */
    textStyle: {
      fontFamily: 'Arial',
      fontSize: 13,
      fill: '#000'
    },

    /**
     * @description Legend icon default style configuration
     * @type {Object}
     * @default style = {Configuration Of Class Style}
     */
    iconStyle: {},

    /**
     * @description Legend text unselected default style configuration
     * @type {Object}
     * @default style = {Configuration Of Class Style}
     */
    textUnselectedStyle: {
      fontFamily: 'Arial',
      fontSize: 13,
      fill: '#999'
    },

    /**
     * @description Legend icon unselected default style configuration
     * @type {Object}
     * @default style = {Configuration Of Class Style}
     */
    iconUnselectedStyle: {
      fill: '#999'
    },

    /**
     * @description Legend render level
     * Priority rendering high level
     * @type {Number}
     * @default rLevel = 20
     */
    rLevel: 20,

    /**
     * @description Legend animation curve
     * @type {String}
     * @default animationCurve = 'easeOutCubic'
     */
    animationCurve: 'easeOutCubic',

    /**
     * @description Legend animation frame
     * @type {Number}
     * @default animationFrame = 50
     */
    animationFrame: 50
  };
  exports.legendConfig = legendConfig;
  });

  unwrapExports(legend);
  var legend_1 = legend.legendConfig;

  var config = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.changeDefaultConfig = changeDefaultConfig;
  Object.defineProperty(exports, "colorConfig", {
    enumerable: true,
    get: function get() {
      return color.colorConfig;
    }
  });
  Object.defineProperty(exports, "gridConfig", {
    enumerable: true,
    get: function get() {
      return grid.gridConfig;
    }
  });
  Object.defineProperty(exports, "xAxisConfig", {
    enumerable: true,
    get: function get() {
      return axis.xAxisConfig;
    }
  });
  Object.defineProperty(exports, "yAxisConfig", {
    enumerable: true,
    get: function get() {
      return axis.yAxisConfig;
    }
  });
  Object.defineProperty(exports, "titleConfig", {
    enumerable: true,
    get: function get() {
      return title.titleConfig;
    }
  });
  Object.defineProperty(exports, "lineConfig", {
    enumerable: true,
    get: function get() {
      return line.lineConfig;
    }
  });
  Object.defineProperty(exports, "barConfig", {
    enumerable: true,
    get: function get() {
      return bar.barConfig;
    }
  });
  Object.defineProperty(exports, "pieConfig", {
    enumerable: true,
    get: function get() {
      return pie$1.pieConfig;
    }
  });
  Object.defineProperty(exports, "radarAxisConfig", {
    enumerable: true,
    get: function get() {
      return radarAxis.radarAxisConfig;
    }
  });
  Object.defineProperty(exports, "radarConfig", {
    enumerable: true,
    get: function get() {
      return radar.radarConfig;
    }
  });
  Object.defineProperty(exports, "gaugeConfig", {
    enumerable: true,
    get: function get() {
      return gauge.gaugeConfig;
    }
  });
  Object.defineProperty(exports, "legendConfig", {
    enumerable: true,
    get: function get() {
      return legend.legendConfig;
    }
  });
  exports.keys = void 0;

























  var allConfig = {
    colorConfig: color.colorConfig,
    gridConfig: grid.gridConfig,
    xAxisConfig: axis.xAxisConfig,
    yAxisConfig: axis.yAxisConfig,
    titleConfig: title.titleConfig,
    lineConfig: line.lineConfig,
    barConfig: bar.barConfig,
    pieConfig: pie$1.pieConfig,
    radarAxisConfig: radarAxis.radarAxisConfig,
    radarConfig: radar.radarConfig,
    gaugeConfig: gauge.gaugeConfig,
    legendConfig: legend.legendConfig
    /**
     * @description Change default configuration
     * @param {String} key          Configuration key
     * @param {Object|Array} config Your config
     * @return {Undefined} No return
     */

  };

  function changeDefaultConfig(key, config) {
    if (!allConfig["".concat(key, "Config")]) {
      console.warn('Change default config Error - Invalid key!');
      return;
    }

    (0, util$1.deepMerge)(allConfig["".concat(key, "Config")], config);
  }

  var keys = ['color', 'title', 'legend', 'xAxis', 'yAxis', 'grid', 'radarAxis', 'line', 'bar', 'pie', 'radar', 'gauge'];
  exports.keys = keys;
  });

  unwrapExports(config);
  var config_1 = config.changeDefaultConfig;
  var config_2 = config.keys;

  var mergeColor_1 = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.mergeColor = mergeColor;







  function mergeColor(chart) {
    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var defaultColor = (0, util.deepClone)(config.colorConfig, true);
    var color = option.color,
        series = option.series;
    if (!series) series = [];
    if (!color) color = [];
    option.color = color = (0, util$1.deepMerge)(defaultColor, color);
    if (!series.length) return;
    var colorNum = color.length;
    series.forEach(function (item, i) {
      if (item.color) return;
      item.color = color[i % colorNum];
    });
    var pies = series.filter(function (_ref) {
      var type = _ref.type;
      return type === 'pie';
    });
    pies.forEach(function (pie) {
      return pie.data.forEach(function (di, i) {
        return di.color = color[i % colorNum];
      });
    });
    var gauges = series.filter(function (_ref2) {
      var type = _ref2.type;
      return type === 'gauge';
    });
    gauges.forEach(function (gauge) {
      return gauge.data.forEach(function (di, i) {
        return di.color = color[i % colorNum];
      });
    });
    var barWithIndependentColor = series.filter(function (_ref3) {
      var type = _ref3.type,
          independentColor = _ref3.independentColor;
      return type === 'bar' && independentColor;
    });
    barWithIndependentColor.forEach(function (bar) {
      if (bar.independentColors) return;
      bar.independentColors = color;
    });
  }
  });

  unwrapExports(mergeColor_1);
  var mergeColor_2 = mergeColor_1.mergeColor;

  var updater_class = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.doUpdate = doUpdate;
  exports.Updater = void 0;

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);

  var _typeof2 = interopRequireDefault(_typeof_1);

  var _classCallCheck2 = interopRequireDefault(classCallCheck);

  var Updater = function Updater(config, series) {
    (0, _classCallCheck2["default"])(this, Updater);
    var chart = config.chart,
        key = config.key,
        getGraphConfig = config.getGraphConfig;

    if (typeof getGraphConfig !== 'function') {
      console.warn('Updater need function getGraphConfig!');
      return;
    }

    if (!chart[key]) this.graphs = chart[key] = [];
    Object.assign(this, config);
    this.update(series);
  };

  exports.Updater = Updater;

  Updater.prototype.update = function (series) {
    var _this = this;

    var graphs = this.graphs,
        beforeUpdate = this.beforeUpdate;
    delRedundanceGraph(this, series);
    if (!series.length) return;
    var beforeUpdateType = (0, _typeof2["default"])(beforeUpdate);
    series.forEach(function (seriesItem, i) {
      if (beforeUpdateType === 'function') beforeUpdate(graphs, seriesItem, i, _this);
      var cache = graphs[i];

      if (cache) {
        changeGraphs(cache, seriesItem, i, _this);
      } else {
        addGraphs(graphs, seriesItem, i, _this);
      }
    });
  };

  function delRedundanceGraph(updater, series) {
    var graphs = updater.graphs,
        render = updater.chart.render;
    var cacheGraphNum = graphs.length;
    var needGraphNum = series.length;

    if (cacheGraphNum > needGraphNum) {
      var needDelGraphs = graphs.splice(needGraphNum);
      needDelGraphs.forEach(function (item) {
        return item.forEach(function (g) {
          return render.delGraph(g);
        });
      });
    }
  }

  function changeGraphs(cache, seriesItem, i, updater) {
    var getGraphConfig = updater.getGraphConfig,
        render = updater.chart.render,
        beforeChange = updater.beforeChange;
    var configs = getGraphConfig(seriesItem, updater);
    balanceGraphsNum(cache, configs, render);
    cache.forEach(function (graph, j) {
      var config = configs[j];
      if (typeof beforeChange === 'function') beforeChange(graph, config);
      updateGraphConfigByKey(graph, config);
    });
  }

  function balanceGraphsNum(graphs, graphConfig, render) {
    var cacheGraphNum = graphs.length;
    var needGraphNum = graphConfig.length;

    if (needGraphNum > cacheGraphNum) {
      var lastCacheGraph = graphs.slice(-1)[0];
      var needAddGraphNum = needGraphNum - cacheGraphNum;
      var needAddGraphs = new Array(needAddGraphNum).fill(0).map(function (foo) {
        return render.clone(lastCacheGraph);
      });
      graphs.push.apply(graphs, (0, _toConsumableArray2["default"])(needAddGraphs));
    } else if (needGraphNum < cacheGraphNum) {
      var needDelCache = graphs.splice(needGraphNum);
      needDelCache.forEach(function (g) {
        return render.delGraph(g);
      });
    }
  }

  function addGraphs(graphs, seriesItem, i, updater) {
    var getGraphConfig = updater.getGraphConfig,
        getStartGraphConfig = updater.getStartGraphConfig,
        chart = updater.chart;
    var render = chart.render;
    var startConfigs = null;
    if (typeof getStartGraphConfig === 'function') startConfigs = getStartGraphConfig(seriesItem, updater);
    var configs = getGraphConfig(seriesItem, updater);
    if (!configs.length) return;

    if (startConfigs) {
      graphs[i] = startConfigs.map(function (config) {
        return render.add(config);
      });
      graphs[i].forEach(function (graph, i) {
        var config = configs[i];
        updateGraphConfigByKey(graph, config);
      });
    } else {
      graphs[i] = configs.map(function (config) {
        return render.add(config);
      });
    }

    var afterAddGraph = updater.afterAddGraph;
    if (typeof afterAddGraph === 'function') afterAddGraph(graphs[i]);
  }

  function updateGraphConfigByKey(graph, config) {
    var keys = Object.keys(config);
    keys.forEach(function (key) {
      if (key === 'shape' || key === 'style') {
        graph.animation(key, config[key], true);
      } else {
        graph[key] = config[key];
      }
    });
  }

  function doUpdate() {
    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
        chart = _ref.chart,
        series = _ref.series,
        key = _ref.key,
        getGraphConfig = _ref.getGraphConfig,
        getStartGraphConfig = _ref.getStartGraphConfig,
        beforeChange = _ref.beforeChange,
        beforeUpdate = _ref.beforeUpdate,
        afterAddGraph = _ref.afterAddGraph;

    if (chart[key]) {
      chart[key].update(series);
    } else {
      chart[key] = new Updater({
        chart: chart,
        key: key,
        getGraphConfig: getGraphConfig,
        getStartGraphConfig: getStartGraphConfig,
        beforeChange: beforeChange,
        beforeUpdate: beforeUpdate,
        afterAddGraph: afterAddGraph
      }, series);
    }
  }
  });

  unwrapExports(updater_class);
  var updater_class_1 = updater_class.doUpdate;
  var updater_class_2 = updater_class.Updater;

  var title_1$1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.title = title;

  var _slicedToArray2 = interopRequireDefault(slicedToArray);









  function title(chart) {
    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var title = [];

    if (option.title) {
      title[0] = (0, util$1.deepMerge)((0, util.deepClone)(config.titleConfig, true), option.title);
    }

    (0, updater_class.doUpdate)({
      chart: chart,
      series: title,
      key: 'title',
      getGraphConfig: getTitleConfig
    });
  }

  function getTitleConfig(titleItem, updater) {
    var animationCurve = config.titleConfig.animationCurve,
        animationFrame = config.titleConfig.animationFrame,
        rLevel = config.titleConfig.rLevel;
    var shape = getTitleShape(titleItem, updater);
    var style = getTitleStyle(titleItem);
    return [{
      name: 'text',
      index: rLevel,
      visible: titleItem.show,
      animationCurve: animationCurve,
      animationFrame: animationFrame,
      shape: shape,
      style: style
    }];
  }

  function getTitleShape(titleItem, updater) {
    var offset = titleItem.offset,
        text = titleItem.text;
    var _updater$chart$gridAr = updater.chart.gridArea,
        x = _updater$chart$gridAr.x,
        y = _updater$chart$gridAr.y,
        w = _updater$chart$gridAr.w;

    var _offset = (0, _slicedToArray2["default"])(offset, 2),
        ox = _offset[0],
        oy = _offset[1];

    return {
      content: text,
      position: [x + w / 2 + ox, y + oy]
    };
  }

  function getTitleStyle(titleItem) {
    var style = titleItem.style;
    return style;
  }
  });

  unwrapExports(title_1$1);
  var title_2 = title_1$1.title;

  var grid_1$1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.grid = grid;

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _defineProperty2 = interopRequireDefault(defineProperty);









  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  function grid(chart) {
    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var grid = option.grid;
    grid = (0, util$1.deepMerge)((0, util.deepClone)(config.gridConfig, true), grid || {});
    (0, updater_class.doUpdate)({
      chart: chart,
      series: [grid],
      key: 'grid',
      getGraphConfig: getGridConfig
    });
  }

  function getGridConfig(gridItem, updater) {
    var animationCurve = gridItem.animationCurve,
        animationFrame = gridItem.animationFrame,
        rLevel = gridItem.rLevel;
    var shape = getGridShape(gridItem, updater);
    var style = getGridStyle(gridItem);
    updater.chart.gridArea = _objectSpread({}, shape);
    return [{
      name: 'rect',
      index: rLevel,
      animationCurve: animationCurve,
      animationFrame: animationFrame,
      shape: shape,
      style: style
    }];
  }

  function getGridShape(gridItem, updater) {
    var _updater$chart$render = (0, _slicedToArray2["default"])(updater.chart.render.area, 2),
        w = _updater$chart$render[0],
        h = _updater$chart$render[1];

    var left = getNumberValue(gridItem.left, w);
    var right = getNumberValue(gridItem.right, w);
    var top = getNumberValue(gridItem.top, h);
    var bottom = getNumberValue(gridItem.bottom, h);
    var width = w - left - right;
    var height = h - top - bottom;
    return {
      x: left,
      y: top,
      w: width,
      h: height
    };
  }

  function getNumberValue(val, all) {
    if (typeof val === 'number') return val;
    if (typeof val !== 'string') return 0;
    return all * parseInt(val) / 100;
  }

  function getGridStyle(gridItem) {
    var style = gridItem.style;
    return style;
  }
  });

  unwrapExports(grid_1$1);
  var grid_2 = grid_1$1.grid;

  var axis_1$1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.axis = axis;

  var _typeof2 = interopRequireDefault(_typeof_1);

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _defineProperty2 = interopRequireDefault(defineProperty);

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);









  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  var axisConfig = {
    xAxisConfig: config.xAxisConfig,
    yAxisConfig: config.yAxisConfig
  };
  var abs = Math.abs,
      pow = Math.pow;

  function axis(chart) {
    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var xAxis = option.xAxis,
        yAxis = option.yAxis,
        series = option.series;
    var allAxis = [];

    if (xAxis && yAxis && series) {
      allAxis = getAllAxis(xAxis, yAxis);
      allAxis = mergeDefaultAxisConfig(allAxis);
      allAxis = allAxis.filter(function (_ref) {
        var show = _ref.show;
        return show;
      });
      allAxis = mergeDefaultBoundaryGap(allAxis);
      allAxis = calcAxisLabelData(allAxis, series);
      allAxis = setAxisPosition(allAxis);
      allAxis = calcAxisLinePosition(allAxis, chart);
      allAxis = calcAxisTickPosition(allAxis);
      allAxis = calcAxisNamePosition(allAxis);
      allAxis = calcSplitLinePosition(allAxis, chart);
    }

    (0, updater_class.doUpdate)({
      chart: chart,
      series: allAxis,
      key: 'axisLine',
      getGraphConfig: getLineConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: allAxis,
      key: 'axisTick',
      getGraphConfig: getTickConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: allAxis,
      key: 'axisLabel',
      getGraphConfig: getLabelConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: allAxis,
      key: 'axisName',
      getGraphConfig: getNameConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: allAxis,
      key: 'splitLine',
      getGraphConfig: getSplitLineConfig
    });
    chart.axisData = allAxis;
  }

  function getAllAxis(xAxis, yAxis) {
    var allXAxis = [],
        allYAxis = [];

    if (xAxis instanceof Array) {
      var _allXAxis;

      (_allXAxis = allXAxis).push.apply(_allXAxis, (0, _toConsumableArray2["default"])(xAxis));
    } else {
      allXAxis.push(xAxis);
    }

    if (yAxis instanceof Array) {
      var _allYAxis;

      (_allYAxis = allYAxis).push.apply(_allYAxis, (0, _toConsumableArray2["default"])(yAxis));
    } else {
      allYAxis.push(yAxis);
    }

    allXAxis.splice(2);
    allYAxis.splice(2);
    allXAxis = allXAxis.map(function (axis, i) {
      return _objectSpread({}, axis, {
        index: i,
        axis: 'x'
      });
    });
    allYAxis = allYAxis.map(function (axis, i) {
      return _objectSpread({}, axis, {
        index: i,
        axis: 'y'
      });
    });
    return [].concat((0, _toConsumableArray2["default"])(allXAxis), (0, _toConsumableArray2["default"])(allYAxis));
  }

  function mergeDefaultAxisConfig(allAxis) {
    var xAxis = allAxis.filter(function (_ref2) {
      var axis = _ref2.axis;
      return axis === 'x';
    });
    var yAxis = allAxis.filter(function (_ref3) {
      var axis = _ref3.axis;
      return axis === 'y';
    });
    xAxis = xAxis.map(function (axis) {
      return (0, util$1.deepMerge)((0, util.deepClone)(config.xAxisConfig), axis);
    });
    yAxis = yAxis.map(function (axis) {
      return (0, util$1.deepMerge)((0, util.deepClone)(config.yAxisConfig), axis);
    });
    return [].concat((0, _toConsumableArray2["default"])(xAxis), (0, _toConsumableArray2["default"])(yAxis));
  }

  function mergeDefaultBoundaryGap(allAxis) {
    var valueAxis = allAxis.filter(function (_ref4) {
      var data = _ref4.data;
      return data === 'value';
    });
    var labelAxis = allAxis.filter(function (_ref5) {
      var data = _ref5.data;
      return data !== 'value';
    });
    valueAxis.forEach(function (axis) {
      if (typeof axis.boundaryGap === 'boolean') return;
      axis.boundaryGap = false;
    });
    labelAxis.forEach(function (axis) {
      if (typeof axis.boundaryGap === 'boolean') return;
      axis.boundaryGap = true;
    });
    return [].concat((0, _toConsumableArray2["default"])(valueAxis), (0, _toConsumableArray2["default"])(labelAxis));
  }

  function calcAxisLabelData(allAxis, series) {
    var valueAxis = allAxis.filter(function (_ref6) {
      var data = _ref6.data;
      return data === 'value';
    });
    var labelAxis = allAxis.filter(function (_ref7) {
      var data = _ref7.data;
      return data instanceof Array;
    });
    valueAxis = calcValueAxisLabelData(valueAxis, series);
    labelAxis = calcLabelAxisLabelData(labelAxis);
    return [].concat((0, _toConsumableArray2["default"])(valueAxis), (0, _toConsumableArray2["default"])(labelAxis));
  }

  function calcValueAxisLabelData(valueAxis, series) {
    return valueAxis.map(function (axis) {
      var minMaxValue = getValueAxisMaxMinValue(axis, series);

      var _getTrueMinMax = getTrueMinMax(axis, minMaxValue),
          _getTrueMinMax2 = (0, _slicedToArray2["default"])(_getTrueMinMax, 2),
          min = _getTrueMinMax2[0],
          max = _getTrueMinMax2[1];

      var interval = getValueInterval(min, max, axis);
      var formatter = axis.axisLabel.formatter;
      var label = [];

      if (min < 0 && max > 0) {
        label = getValueAxisLabelFromZero(min, max, interval);
      } else {
        label = getValueAxisLabelFromMin(min, max, interval);
      }

      label = label.map(function (l) {
        return parseFloat(l.toFixed(2));
      });
      return _objectSpread({}, axis, {
        maxValue: label.slice(-1)[0],
        minValue: label[0],
        label: getAfterFormatterLabel(label, formatter)
      });
    });
  }

  function getValueAxisMaxMinValue(axis, series) {
    series = series.filter(function (_ref8) {
      var show = _ref8.show,
          type = _ref8.type;
      if (show === false) return false;
      if (type === 'pie') return false;
      return true;
    });
    if (series.length === 0) return [0, 0];
    var index = axis.index,
        axisType = axis.axis;
    series = mergeStackData(series);
    var axisName = axisType + 'Axis';
    var valueSeries = series.filter(function (s) {
      return s[axisName] === index;
    });
    if (!valueSeries.length) valueSeries = series;
    return getSeriesMinMaxValue(valueSeries);
  }

  function getSeriesMinMaxValue(series) {
    if (!series) return;
    var minValue = Math.min.apply(Math, (0, _toConsumableArray2["default"])(series.map(function (_ref9) {
      var data = _ref9.data;
      return Math.min.apply(Math, (0, _toConsumableArray2["default"])((0, util$1.filterNonNumber)(data)));
    })));
    var maxValue = Math.max.apply(Math, (0, _toConsumableArray2["default"])(series.map(function (_ref10) {
      var data = _ref10.data;
      return Math.max.apply(Math, (0, _toConsumableArray2["default"])((0, util$1.filterNonNumber)(data)));
    })));
    return [minValue, maxValue];
  }

  function mergeStackData(series) {
    var seriesCloned = (0, util.deepClone)(series, true);
    series.forEach(function (item, i) {
      var data = (0, util$1.mergeSameStackData)(item, series);
      seriesCloned[i].data = data;
    });
    return seriesCloned;
  }

  function getTrueMinMax(_ref11, _ref12) {
    var min = _ref11.min,
        max = _ref11.max,
        axis = _ref11.axis;

    var _ref13 = (0, _slicedToArray2["default"])(_ref12, 2),
        minValue = _ref13[0],
        maxValue = _ref13[1];

    var minType = (0, _typeof2["default"])(min),
        maxType = (0, _typeof2["default"])(max);

    if (!testMinMaxType(min)) {
      min = axisConfig[axis + 'AxisConfig'].min;
      minType = 'string';
    }

    if (!testMinMaxType(max)) {
      max = axisConfig[axis + 'AxisConfig'].max;
      maxType = 'string';
    }

    if (minType === 'string') {
      min = parseInt(minValue - abs(minValue * parseFloat(min) / 100));
      var lever = getValueLever(min);
      min = parseFloat((min / lever - 0.1).toFixed(1)) * lever;
    }

    if (maxType === 'string') {
      max = parseInt(maxValue + abs(maxValue * parseFloat(max) / 100));

      var _lever = getValueLever(max);

      max = parseFloat((max / _lever + 0.1).toFixed(1)) * _lever;
    }

    return [min, max];
  }

  function getValueLever(value) {
    var valueString = abs(value).toString();
    var valueLength = valueString.length;
    var firstZeroIndex = valueString.replace(/0*$/g, '').indexOf('0');
    var pow10Num = valueLength - 1;
    if (firstZeroIndex !== -1) pow10Num -= firstZeroIndex;
    return pow(10, pow10Num);
  }

  function testMinMaxType(val) {
    var valType = (0, _typeof2["default"])(val);
    var isValidString = valType === 'string' && /^\d+%$/.test(val);
    var isValidNumber = valType === 'number';
    return isValidString || isValidNumber;
  }

  function getValueAxisLabelFromZero(min, max, interval) {
    var negative = [],
        positive = [];
    var currentNegative = 0,
        currentPositive = 0;

    do {
      negative.push(currentNegative -= interval);
    } while (currentNegative > min);

    do {
      positive.push(currentPositive += interval);
    } while (currentPositive < max);

    return [].concat((0, _toConsumableArray2["default"])(negative.reverse()), [0], (0, _toConsumableArray2["default"])(positive));
  }

  function getValueAxisLabelFromMin(min, max, interval) {
    var label = [min],
        currentValue = min;

    do {
      label.push(currentValue += interval);
    } while (currentValue < max);

    return label;
  }

  function getAfterFormatterLabel(label, formatter) {
    if (!formatter) return label;
    if (typeof formatter === 'string') label = label.map(function (l) {
      return formatter.replace('{value}', l);
    });
    if (typeof formatter === 'function') label = label.map(function (value, index) {
      return formatter({
        value: value,
        index: index
      });
    });
    return label;
  }

  function calcLabelAxisLabelData(labelAxis) {
    return labelAxis.map(function (axis) {
      var data = axis.data,
          formatter = axis.axisLabel.formatter;
      return _objectSpread({}, axis, {
        label: getAfterFormatterLabel(data, formatter)
      });
    });
  }

  function getValueInterval(min, max, axis) {
    var interval = axis.interval,
        minInterval = axis.minInterval,
        maxInterval = axis.maxInterval,
        splitNumber = axis.splitNumber,
        axisType = axis.axis;
    var config = axisConfig[axisType + 'AxisConfig'];
    if (typeof interval !== 'number') interval = config.interval;
    if (typeof minInterval !== 'number') minInterval = config.minInterval;
    if (typeof maxInterval !== 'number') maxInterval = config.maxInterval;
    if (typeof splitNumber !== 'number') splitNumber = config.splitNumber;
    if (typeof interval === 'number') return interval;
    var valueInterval = parseInt((max - min) / (splitNumber - 1));
    if (valueInterval.toString().length > 1) valueInterval = parseInt(valueInterval.toString().replace(/\d$/, '0'));
    if (valueInterval === 0) valueInterval = 1;
    if (typeof minInterval === 'number' && valueInterval < minInterval) return minInterval;
    if (typeof maxInterval === 'number' && valueInterval > maxInterval) return maxInterval;
    return valueInterval;
  }

  function setAxisPosition(allAxis) {
    var xAxis = allAxis.filter(function (_ref14) {
      var axis = _ref14.axis;
      return axis === 'x';
    });
    var yAxis = allAxis.filter(function (_ref15) {
      var axis = _ref15.axis;
      return axis === 'y';
    });
    if (xAxis[0] && !xAxis[0].position) xAxis[0].position = config.xAxisConfig.position;

    if (xAxis[1] && !xAxis[1].position) {
      xAxis[1].position = xAxis[0].position === 'bottom' ? 'top' : 'bottom';
    }

    if (yAxis[0] && !yAxis[0].position) yAxis[0].position = config.yAxisConfig.position;

    if (yAxis[1] && !yAxis[1].position) {
      yAxis[1].position = yAxis[0].position === 'left' ? 'right' : 'left';
    }

    return [].concat((0, _toConsumableArray2["default"])(xAxis), (0, _toConsumableArray2["default"])(yAxis));
  }

  function calcAxisLinePosition(allAxis, chart) {
    var _chart$gridArea = chart.gridArea,
        x = _chart$gridArea.x,
        y = _chart$gridArea.y,
        w = _chart$gridArea.w,
        h = _chart$gridArea.h;
    allAxis = allAxis.map(function (axis) {
      var position = axis.position;
      var linePosition = [];

      if (position === 'left') {
        linePosition = [[x, y], [x, y + h]].reverse();
      } else if (position === 'right') {
        linePosition = [[x + w, y], [x + w, y + h]].reverse();
      } else if (position === 'top') {
        linePosition = [[x, y], [x + w, y]];
      } else if (position === 'bottom') {
        linePosition = [[x, y + h], [x + w, y + h]];
      }

      return _objectSpread({}, axis, {
        linePosition: linePosition
      });
    });
    return allAxis;
  }

  function calcAxisTickPosition(allAxis, chart) {
    return allAxis.map(function (axisItem) {
      var axis = axisItem.axis,
          linePosition = axisItem.linePosition,
          position = axisItem.position,
          label = axisItem.label,
          boundaryGap = axisItem.boundaryGap;
      if (typeof boundaryGap !== 'boolean') boundaryGap = axisConfig[axis + 'AxisConfig'].boundaryGap;
      var labelNum = label.length;

      var _linePosition = (0, _slicedToArray2["default"])(linePosition, 2),
          _linePosition$ = (0, _slicedToArray2["default"])(_linePosition[0], 2),
          startX = _linePosition$[0],
          startY = _linePosition$[1],
          _linePosition$2 = (0, _slicedToArray2["default"])(_linePosition[1], 2),
          endX = _linePosition$2[0],
          endY = _linePosition$2[1];

      var gapLength = axis === 'x' ? endX - startX : endY - startY;
      var gap = gapLength / (boundaryGap ? labelNum : labelNum - 1);
      var tickPosition = new Array(labelNum).fill(0).map(function (foo, i) {
        if (axis === 'x') {
          return [startX + gap * (boundaryGap ? i + 0.5 : i), startY];
        }

        return [startX, startY + gap * (boundaryGap ? i + 0.5 : i)];
      });
      var tickLinePosition = getTickLinePosition(axis, boundaryGap, position, tickPosition, gap);
      return _objectSpread({}, axisItem, {
        tickPosition: tickPosition,
        tickLinePosition: tickLinePosition,
        tickGap: gap
      });
    });
  }

  function getTickLinePosition(axisType, boundaryGap, position, tickPosition, gap) {
    var index = axisType === 'x' ? 1 : 0;
    var plus = 5;
    if (axisType === 'x' && position === 'top') plus = -5;
    if (axisType === 'y' && position === 'left') plus = -5;
    var tickLinePosition = tickPosition.map(function (lineStart) {
      var lineEnd = (0, util.deepClone)(lineStart);
      lineEnd[index] += plus;
      return [(0, util.deepClone)(lineStart), lineEnd];
    });
    if (!boundaryGap) return tickLinePosition;
    index = axisType === 'x' ? 0 : 1;
    plus = gap / 2;
    tickLinePosition.forEach(function (_ref16) {
      var _ref17 = (0, _slicedToArray2["default"])(_ref16, 2),
          lineStart = _ref17[0],
          lineEnd = _ref17[1];

      lineStart[index] += plus;
      lineEnd[index] += plus;
    });
    return tickLinePosition;
  }

  function calcAxisNamePosition(allAxis, chart) {
    return allAxis.map(function (axisItem) {
      var nameGap = axisItem.nameGap,
          nameLocation = axisItem.nameLocation,
          position = axisItem.position,
          linePosition = axisItem.linePosition;

      var _linePosition2 = (0, _slicedToArray2["default"])(linePosition, 2),
          lineStart = _linePosition2[0],
          lineEnd = _linePosition2[1];

      var namePosition = (0, _toConsumableArray2["default"])(lineStart);
      if (nameLocation === 'end') namePosition = (0, _toConsumableArray2["default"])(lineEnd);

      if (nameLocation === 'center') {
        namePosition[0] = (lineStart[0] + lineEnd[0]) / 2;
        namePosition[1] = (lineStart[1] + lineEnd[1]) / 2;
      }

      var index = 0;
      if (position === 'top' && nameLocation === 'center') index = 1;
      if (position === 'bottom' && nameLocation === 'center') index = 1;
      if (position === 'left' && nameLocation !== 'center') index = 1;
      if (position === 'right' && nameLocation !== 'center') index = 1;
      var plus = nameGap;
      if (position === 'top' && nameLocation !== 'end') plus *= -1;
      if (position === 'left' && nameLocation !== 'start') plus *= -1;
      if (position === 'bottom' && nameLocation === 'start') plus *= -1;
      if (position === 'right' && nameLocation === 'end') plus *= -1;
      namePosition[index] += plus;
      return _objectSpread({}, axisItem, {
        namePosition: namePosition
      });
    });
  }

  function calcSplitLinePosition(allAxis, chart) {
    var _chart$gridArea2 = chart.gridArea,
        w = _chart$gridArea2.w,
        h = _chart$gridArea2.h;
    return allAxis.map(function (axisItem) {
      var tickLinePosition = axisItem.tickLinePosition,
          position = axisItem.position,
          boundaryGap = axisItem.boundaryGap;
      var index = 0,
          plus = w;
      if (position === 'top' || position === 'bottom') index = 1;
      if (position === 'top' || position === 'bottom') plus = h;
      if (position === 'right' || position === 'bottom') plus *= -1;
      var splitLinePosition = tickLinePosition.map(function (_ref18) {
        var _ref19 = (0, _slicedToArray2["default"])(_ref18, 1),
            startPoint = _ref19[0];

        var endPoint = (0, _toConsumableArray2["default"])(startPoint);
        endPoint[index] += plus;
        return [(0, _toConsumableArray2["default"])(startPoint), endPoint];
      });
      if (!boundaryGap) splitLinePosition.shift();
      return _objectSpread({}, axisItem, {
        splitLinePosition: splitLinePosition
      });
    });
  }

  function getLineConfig(axisItem) {
    var animationCurve = axisItem.animationCurve,
        animationFrame = axisItem.animationFrame,
        rLevel = axisItem.rLevel;
    return [{
      name: 'polyline',
      index: rLevel,
      visible: axisItem.axisLine.show,
      animationCurve: animationCurve,
      animationFrame: animationFrame,
      shape: getLineShape(axisItem),
      style: getLineStyle(axisItem)
    }];
  }

  function getLineShape(axisItem) {
    var linePosition = axisItem.linePosition;
    return {
      points: linePosition
    };
  }

  function getLineStyle(axisItem) {
    return axisItem.axisLine.style;
  }

  function getTickConfig(axisItem) {
    var animationCurve = axisItem.animationCurve,
        animationFrame = axisItem.animationFrame,
        rLevel = axisItem.rLevel;
    var shapes = getTickShapes(axisItem);
    var style = getTickStyle(axisItem);
    return shapes.map(function (shape) {
      return {
        name: 'polyline',
        index: rLevel,
        visible: axisItem.axisTick.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: shape,
        style: style
      };
    });
  }

  function getTickShapes(axisItem) {
    var tickLinePosition = axisItem.tickLinePosition;
    return tickLinePosition.map(function (points) {
      return {
        points: points
      };
    });
  }

  function getTickStyle(axisItem) {
    return axisItem.axisTick.style;
  }

  function getLabelConfig(axisItem) {
    var animationCurve = axisItem.animationCurve,
        animationFrame = axisItem.animationFrame,
        rLevel = axisItem.rLevel;
    var shapes = getLabelShapes(axisItem);
    var styles = getLabelStyle(axisItem, shapes);
    return shapes.map(function (shape, i) {
      return {
        name: 'text',
        index: rLevel,
        visible: axisItem.axisLabel.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: shape,
        style: styles[i],
        setGraphCenter: function setGraphCenter() {
          return void 0;
        }
      };
    });
  }

  function getLabelShapes(axisItem) {
    var label = axisItem.label,
        tickPosition = axisItem.tickPosition,
        position = axisItem.position;
    return tickPosition.map(function (point, i) {
      return {
        position: getLabelRealPosition(point, position),
        content: label[i].toString()
      };
    });
  }

  function getLabelRealPosition(points, position) {
    var index = 0,
        plus = 10;
    if (position === 'top' || position === 'bottom') index = 1;
    if (position === 'top' || position === 'left') plus = -10;
    points = (0, util.deepClone)(points);
    points[index] += plus;
    return points;
  }

  function getLabelStyle(axisItem, shapes) {
    var position = axisItem.position;
    var style = axisItem.axisLabel.style;
    var align = getAxisLabelRealAlign(position);
    style = (0, util$1.deepMerge)(align, style);
    var styles = shapes.map(function (_ref20) {
      var position = _ref20.position;
      return _objectSpread({}, style, {
        graphCenter: position
      });
    });
    return styles;
  }

  function getAxisLabelRealAlign(position) {
    if (position === 'left') return {
      textAlign: 'right',
      textBaseline: 'middle'
    };
    if (position === 'right') return {
      textAlign: 'left',
      textBaseline: 'middle'
    };
    if (position === 'top') return {
      textAlign: 'center',
      textBaseline: 'bottom'
    };
    if (position === 'bottom') return {
      textAlign: 'center',
      textBaseline: 'top'
    };
  }

  function getNameConfig(axisItem) {
    var animationCurve = axisItem.animationCurve,
        animationFrame = axisItem.animationFrame,
        rLevel = axisItem.rLevel;
    return [{
      name: 'text',
      index: rLevel,
      animationCurve: animationCurve,
      animationFrame: animationFrame,
      shape: getNameShape(axisItem),
      style: getNameStyle(axisItem)
    }];
  }

  function getNameShape(axisItem) {
    var name = axisItem.name,
        namePosition = axisItem.namePosition;
    return {
      content: name,
      position: namePosition
    };
  }

  function getNameStyle(axisItem) {
    var nameLocation = axisItem.nameLocation,
        position = axisItem.position,
        style = axisItem.nameTextStyle;
    var align = getNameRealAlign(position, nameLocation);
    return (0, util$1.deepMerge)(align, style);
  }

  function getNameRealAlign(position, location) {
    if (position === 'top' && location === 'start' || position === 'bottom' && location === 'start' || position === 'left' && location === 'center') return {
      textAlign: 'right',
      textBaseline: 'middle'
    };
    if (position === 'top' && location === 'end' || position === 'bottom' && location === 'end' || position === 'right' && location === 'center') return {
      textAlign: 'left',
      textBaseline: 'middle'
    };
    if (position === 'top' && location === 'center' || position === 'left' && location === 'end' || position === 'right' && location === 'end') return {
      textAlign: 'center',
      textBaseline: 'bottom'
    };
    if (position === 'bottom' && location === 'center' || position === 'left' && location === 'start' || position === 'right' && location === 'start') return {
      textAlign: 'center',
      textBaseline: 'top'
    };
  }

  function getSplitLineConfig(axisItem) {
    var animationCurve = axisItem.animationCurve,
        animationFrame = axisItem.animationFrame,
        rLevel = axisItem.rLevel;
    var shapes = getSplitLineShapes(axisItem);
    var style = getSplitLineStyle(axisItem);
    return shapes.map(function (shape) {
      return {
        name: 'polyline',
        index: rLevel,
        visible: axisItem.splitLine.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: shape,
        style: style
      };
    });
  }

  function getSplitLineShapes(axisItem) {
    var splitLinePosition = axisItem.splitLinePosition;
    return splitLinePosition.map(function (points) {
      return {
        points: points
      };
    });
  }

  function getSplitLineStyle(axisItem) {
    return axisItem.splitLine.style;
  }
  });

  unwrapExports(axis_1$1);
  var axis_2$1 = axis_1$1.axis;

  var line_1$1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.line = line;

  var _typeof2 = interopRequireDefault(_typeof_1);

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);

  var _defineProperty2 = interopRequireDefault(defineProperty);





  var _bezierCurve = interopRequireDefault(lib$1);



  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  var polylineToBezierCurve = _bezierCurve["default"].polylineToBezierCurve,
      getBezierCurveLength = _bezierCurve["default"].getBezierCurveLength;

  function line(chart) {
    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var xAxis = option.xAxis,
        yAxis = option.yAxis,
        series = option.series;
    var lines = [];

    if (xAxis && yAxis && series) {
      lines = (0, util$1.initNeedSeries)(series, config.lineConfig, 'line');
      lines = calcLinesPosition(lines, chart);
    }

    (0, updater_class.doUpdate)({
      chart: chart,
      series: lines,
      key: 'lineArea',
      getGraphConfig: getLineAreaConfig,
      getStartGraphConfig: getStartLineAreaConfig,
      beforeUpdate: beforeUpdateLineAndArea,
      beforeChange: beforeChangeLineAndArea
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: lines,
      key: 'line',
      getGraphConfig: getLineConfig,
      getStartGraphConfig: getStartLineConfig,
      beforeUpdate: beforeUpdateLineAndArea,
      beforeChange: beforeChangeLineAndArea
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: lines,
      key: 'linePoint',
      getGraphConfig: getPointConfig,
      getStartGraphConfig: getStartPointConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: lines,
      key: 'lineLabel',
      getGraphConfig: getLabelConfig
    });
  }

  function calcLinesPosition(lines, chart) {
    var axisData = chart.axisData;
    return lines.map(function (lineItem) {
      var lineData = (0, util$1.mergeSameStackData)(lineItem, lines);
      lineData = mergeNonNumber(lineItem, lineData);
      var lineAxis = getLineAxis(lineItem, axisData);
      var linePosition = getLinePosition(lineData, lineAxis);
      var lineFillBottomPos = getLineFillBottomPos(lineAxis);
      return _objectSpread({}, lineItem, {
        linePosition: linePosition.filter(function (p) {
          return p;
        }),
        lineFillBottomPos: lineFillBottomPos
      });
    });
  }

  function mergeNonNumber(lineItem, lineData) {
    var data = lineItem.data;
    return lineData.map(function (v, i) {
      return typeof data[i] === 'number' ? v : null;
    });
  }

  function getLineAxis(line, axisData) {
    var xAxisIndex = line.xAxisIndex,
        yAxisIndex = line.yAxisIndex;
    var xAxis = axisData.find(function (_ref) {
      var axis = _ref.axis,
          index = _ref.index;
      return axis === 'x' && index === xAxisIndex;
    });
    var yAxis = axisData.find(function (_ref2) {
      var axis = _ref2.axis,
          index = _ref2.index;
      return axis === 'y' && index === yAxisIndex;
    });
    return [xAxis, yAxis];
  }

  function getLinePosition(lineData, lineAxis) {
    var valueAxisIndex = lineAxis.findIndex(function (_ref3) {
      var data = _ref3.data;
      return data === 'value';
    });
    var valueAxis = lineAxis[valueAxisIndex];
    var labelAxis = lineAxis[1 - valueAxisIndex];
    var linePosition = valueAxis.linePosition,
        axis = valueAxis.axis;
    var tickPosition = labelAxis.tickPosition;
    var tickNum = tickPosition.length;
    var valueAxisPosIndex = axis === 'x' ? 0 : 1;
    var valueAxisStartPos = linePosition[0][valueAxisPosIndex];
    var valueAxisEndPos = linePosition[1][valueAxisPosIndex];
    var valueAxisPosMinus = valueAxisEndPos - valueAxisStartPos;
    var maxValue = valueAxis.maxValue,
        minValue = valueAxis.minValue;
    var valueMinus = maxValue - minValue;
    var position = new Array(tickNum).fill(0).map(function (foo, i) {
      var v = lineData[i];
      if (typeof v !== 'number') return null;
      var valuePercent = (v - minValue) / valueMinus;
      if (valueMinus === 0) valuePercent = 0;
      return valuePercent * valueAxisPosMinus + valueAxisStartPos;
    });
    return position.map(function (vPos, i) {
      if (i >= tickNum || typeof vPos !== 'number') return null;
      var pos = [vPos, tickPosition[i][1 - valueAxisPosIndex]];
      if (valueAxisPosIndex === 0) return pos;
      pos.reverse();
      return pos;
    });
  }

  function getLineFillBottomPos(lineAxis) {
    var valueAxis = lineAxis.find(function (_ref4) {
      var data = _ref4.data;
      return data === 'value';
    });
    var axis = valueAxis.axis,
        linePosition = valueAxis.linePosition,
        minValue = valueAxis.minValue,
        maxValue = valueAxis.maxValue;
    var changeIndex = axis === 'x' ? 0 : 1;
    var changeValue = linePosition[0][changeIndex];

    if (minValue < 0 && maxValue > 0) {
      var valueMinus = maxValue - minValue;
      var posMinus = Math.abs(linePosition[0][changeIndex] - linePosition[1][changeIndex]);
      var offset = Math.abs(minValue) / valueMinus * posMinus;
      if (axis === 'y') offset *= -1;
      changeValue += offset;
    }

    return {
      changeIndex: changeIndex,
      changeValue: changeValue
    };
  }

  function getLineAreaConfig(lineItem) {
    var animationCurve = lineItem.animationCurve,
        animationFrame = lineItem.animationFrame,
        lineFillBottomPos = lineItem.lineFillBottomPos,
        rLevel = lineItem.rLevel;
    return [{
      name: getLineGraphName(lineItem),
      index: rLevel,
      animationCurve: animationCurve,
      animationFrame: animationFrame,
      visible: lineItem.lineArea.show,
      lineFillBottomPos: lineFillBottomPos,
      shape: getLineAndAreaShape(lineItem),
      style: getLineAreaStyle(lineItem),
      drawed: lineAreaDrawed
    }];
  }

  function getLineAndAreaShape(lineItem) {
    var linePosition = lineItem.linePosition;
    return {
      points: linePosition
    };
  }

  function getLineAreaStyle(lineItem) {
    var lineArea = lineItem.lineArea,
        color = lineItem.color;
    var gradient = lineArea.gradient,
        style = lineArea.style;
    var fillColor = [style.fill || color];
    var gradientColor = (0, util$1.deepMerge)(fillColor, gradient);
    if (gradientColor.length === 1) gradientColor.push(gradientColor[0]);
    var gradientParams = getGradientParams(lineItem);
    style = _objectSpread({}, style, {
      stroke: 'rgba(0, 0, 0, 0)'
    });
    return (0, util$1.deepMerge)({
      gradientColor: gradientColor,
      gradientParams: gradientParams,
      gradientType: 'linear',
      gradientWith: 'fill'
    }, style);
  }

  function getGradientParams(lineItem) {
    var lineFillBottomPos = lineItem.lineFillBottomPos,
        linePosition = lineItem.linePosition;
    var changeIndex = lineFillBottomPos.changeIndex,
        changeValue = lineFillBottomPos.changeValue;
    var mainPos = linePosition.map(function (p) {
      return p[changeIndex];
    });
    var maxPos = Math.max.apply(Math, (0, _toConsumableArray2["default"])(mainPos));
    var minPos = Math.min.apply(Math, (0, _toConsumableArray2["default"])(mainPos));
    var beginPos = maxPos;
    if (changeIndex === 1) beginPos = minPos;

    if (changeIndex === 1) {
      return [0, beginPos, 0, changeValue];
    } else {
      return [beginPos, 0, changeValue, 0];
    }
  }

  function lineAreaDrawed(_ref5, _ref6) {
    var lineFillBottomPos = _ref5.lineFillBottomPos,
        shape = _ref5.shape;
    var ctx = _ref6.ctx;
    var points = shape.points;
    var changeIndex = lineFillBottomPos.changeIndex,
        changeValue = lineFillBottomPos.changeValue;
    var linePoint1 = (0, _toConsumableArray2["default"])(points[points.length - 1]);
    var linePoint2 = (0, _toConsumableArray2["default"])(points[0]);
    linePoint1[changeIndex] = changeValue;
    linePoint2[changeIndex] = changeValue;
    ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(linePoint1));
    ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(linePoint2));
    ctx.closePath();
    ctx.fill();
  }

  function getStartLineAreaConfig(lineItem) {
    var config = getLineAreaConfig(lineItem)[0];

    var style = _objectSpread({}, config.style);

    style.opacity = 0;
    config.style = style;
    return [config];
  }

  function beforeUpdateLineAndArea(graphs, lineItem, i, updater) {
    var cache = graphs[i];
    if (!cache) return;
    var currentName = getLineGraphName(lineItem);
    var render = updater.chart.render;
    var name = cache[0].name;
    var delAll = currentName !== name;
    if (!delAll) return;
    cache.forEach(function (g) {
      return render.delGraph(g);
    });
    graphs[i] = null;
  }

  function beforeChangeLineAndArea(graph, config) {
    var points = config.shape.points;
    var graphPoints = graph.shape.points;
    var graphPointsNum = graphPoints.length;
    var pointsNum = points.length;

    if (pointsNum > graphPointsNum) {
      var lastPoint = graphPoints.slice(-1)[0];
      var newAddPoints = new Array(pointsNum - graphPointsNum).fill(0).map(function (foo) {
        return (0, _toConsumableArray2["default"])(lastPoint);
      });
      graphPoints.push.apply(graphPoints, (0, _toConsumableArray2["default"])(newAddPoints));
    } else if (pointsNum < graphPointsNum) {
      graphPoints.splice(pointsNum);
    }
  }

  function getLineConfig(lineItem) {
    var animationCurve = lineItem.animationCurve,
        animationFrame = lineItem.animationFrame,
        rLevel = lineItem.rLevel;
    return [{
      name: getLineGraphName(lineItem),
      index: rLevel + 1,
      animationCurve: animationCurve,
      animationFrame: animationFrame,
      shape: getLineAndAreaShape(lineItem),
      style: getLineStyle(lineItem)
    }];
  }

  function getLineGraphName(lineItem) {
    var smooth = lineItem.smooth;
    return smooth ? 'smoothline' : 'polyline';
  }

  function getLineStyle(lineItem) {
    var lineStyle = lineItem.lineStyle,
        color = lineItem.color,
        smooth = lineItem.smooth,
        linePosition = lineItem.linePosition;
    var lineLength = getLineLength(linePosition, smooth);
    return (0, util$1.deepMerge)({
      stroke: color,
      lineDash: [lineLength, 0]
    }, lineStyle);
  }

  function getLineLength(points) {
    var smooth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    if (!smooth) return (0, util$1.getPolylineLength)(points);
    var curve = polylineToBezierCurve(points);
    return getBezierCurveLength(curve);
  }

  function getStartLineConfig(lineItem) {
    var lineDash = lineItem.lineStyle.lineDash;
    var config = getLineConfig(lineItem)[0];
    var realLineDash = config.style.lineDash;

    if (lineDash) {
      realLineDash = [0, 0];
    } else {
      realLineDash = (0, _toConsumableArray2["default"])(realLineDash).reverse();
    }

    config.style.lineDash = realLineDash;
    return [config];
  }

  function getPointConfig(lineItem) {
    var animationCurve = lineItem.animationCurve,
        animationFrame = lineItem.animationFrame,
        rLevel = lineItem.rLevel;
    var shapes = getPointShapes(lineItem);
    var style = getPointStyle(lineItem);
    return shapes.map(function (shape) {
      return {
        name: 'circle',
        index: rLevel + 2,
        visible: lineItem.linePoint.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: shape,
        style: style
      };
    });
  }

  function getPointShapes(lineItem) {
    var linePosition = lineItem.linePosition,
        radius = lineItem.linePoint.radius;
    return linePosition.map(function (_ref7) {
      var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
          rx = _ref8[0],
          ry = _ref8[1];

      return {
        r: radius,
        rx: rx,
        ry: ry
      };
    });
  }

  function getPointStyle(lineItem) {
    var color = lineItem.color,
        style = lineItem.linePoint.style;
    return (0, util$1.deepMerge)({
      stroke: color
    }, style);
  }

  function getStartPointConfig(lineItem) {
    var configs = getPointConfig(lineItem);
    configs.forEach(function (config) {
      config.shape.r = 0.1;
    });
    return configs;
  }

  function getLabelConfig(lineItem) {
    var animationCurve = lineItem.animationCurve,
        animationFrame = lineItem.animationFrame,
        rLevel = lineItem.rLevel;
    var shapes = getLabelShapes(lineItem);
    var style = getLabelStyle(lineItem);
    return shapes.map(function (shape, i) {
      return {
        name: 'text',
        index: rLevel + 3,
        visible: lineItem.label.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: shape,
        style: style
      };
    });
  }

  function getLabelShapes(lineItem) {
    var contents = formatterLabel(lineItem);
    var position = getLabelPosition(lineItem);
    return contents.map(function (content, i) {
      return {
        content: content,
        position: position[i]
      };
    });
  }

  function getLabelPosition(lineItem) {
    var linePosition = lineItem.linePosition,
        lineFillBottomPos = lineItem.lineFillBottomPos,
        label = lineItem.label;
    var position = label.position,
        offset = label.offset;
    var changeIndex = lineFillBottomPos.changeIndex,
        changeValue = lineFillBottomPos.changeValue;
    return linePosition.map(function (pos) {
      if (position === 'bottom') {
        pos = (0, _toConsumableArray2["default"])(pos);
        pos[changeIndex] = changeValue;
      }

      if (position === 'center') {
        var bottom = (0, _toConsumableArray2["default"])(pos);
        bottom[changeIndex] = changeValue;
        pos = getCenterLabelPoint(pos, bottom);
      }

      return getOffsetedPoint(pos, offset);
    });
  }

  function getOffsetedPoint(_ref9, _ref10) {
    var _ref11 = (0, _slicedToArray2["default"])(_ref9, 2),
        x = _ref11[0],
        y = _ref11[1];

    var _ref12 = (0, _slicedToArray2["default"])(_ref10, 2),
        ox = _ref12[0],
        oy = _ref12[1];

    return [x + ox, y + oy];
  }

  function getCenterLabelPoint(_ref13, _ref14) {
    var _ref15 = (0, _slicedToArray2["default"])(_ref13, 2),
        ax = _ref15[0],
        ay = _ref15[1];

    var _ref16 = (0, _slicedToArray2["default"])(_ref14, 2),
        bx = _ref16[0],
        by = _ref16[1];

    return [(ax + bx) / 2, (ay + by) / 2];
  }

  function formatterLabel(lineItem) {
    var data = lineItem.data,
        formatter = lineItem.label.formatter;
    data = data.filter(function (d) {
      return typeof d === 'number';
    }).map(function (d) {
      return d.toString();
    });
    if (!formatter) return data;
    var type = (0, _typeof2["default"])(formatter);
    if (type === 'string') return data.map(function (d) {
      return formatter.replace('{value}', d);
    });
    if (type === 'function') return data.map(function (value, index) {
      return formatter({
        value: value,
        index: index
      });
    });
    return data;
  }

  function getLabelStyle(lineItem) {
    var color = lineItem.color,
        style = lineItem.label.style;
    return (0, util$1.deepMerge)({
      fill: color
    }, style);
  }
  });

  unwrapExports(line_1$1);
  var line_2 = line_1$1.line;

  var bar_1$1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.bar = bar;

  var _typeof2 = interopRequireDefault(_typeof_1);

  var _defineProperty2 = interopRequireDefault(defineProperty);

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);









  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  function bar(chart) {
    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var xAxis = option.xAxis,
        yAxis = option.yAxis,
        series = option.series;
    var bars = [];

    if (xAxis && yAxis && series) {
      bars = (0, util$1.initNeedSeries)(series, config.barConfig, 'bar');
      bars = setBarAxis(bars, chart);
      bars = setBarPositionData(bars);
      bars = calcBarsPosition(bars);
    }

    (0, updater_class.doUpdate)({
      chart: chart,
      series: bars.slice(-1),
      key: 'backgroundBar',
      getGraphConfig: getBackgroundBarConfig
    });
    bars.reverse();
    (0, updater_class.doUpdate)({
      chart: chart,
      series: bars,
      key: 'bar',
      getGraphConfig: getBarConfig,
      getStartGraphConfig: getStartBarConfig,
      beforeUpdate: beforeUpdateBar
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: bars,
      key: 'barLabel',
      getGraphConfig: getLabelConfig
    });
  }

  function setBarAxis(bars, chart) {
    var axisData = chart.axisData;
    bars.forEach(function (bar) {
      var xAxisIndex = bar.xAxisIndex,
          yAxisIndex = bar.yAxisIndex;
      if (typeof xAxisIndex !== 'number') xAxisIndex = 0;
      if (typeof yAxisIndex !== 'number') yAxisIndex = 0;
      var xAxis = axisData.find(function (_ref) {
        var axis = _ref.axis,
            index = _ref.index;
        return "".concat(axis).concat(index) === "x".concat(xAxisIndex);
      });
      var yAxis = axisData.find(function (_ref2) {
        var axis = _ref2.axis,
            index = _ref2.index;
        return "".concat(axis).concat(index) === "y".concat(yAxisIndex);
      });
      var axis = [xAxis, yAxis];
      var valueAxisIndex = axis.findIndex(function (_ref3) {
        var data = _ref3.data;
        return data === 'value';
      });
      bar.valueAxis = axis[valueAxisIndex];
      bar.labelAxis = axis[1 - valueAxisIndex];
    });
    return bars;
  }

  function setBarPositionData(bars, chart) {
    var labelBarGroup = groupBarByLabelAxis(bars);
    labelBarGroup.forEach(function (group) {
      setBarIndex(group);
      setBarNum(group);
      setBarCategoryWidth(group);
      setBarWidthAndGap(group);
      setBarAllWidthAndGap(group);
    });
    return bars;
  }

  function setBarIndex(bars) {
    var stacks = getBarStack(bars);
    stacks = stacks.map(function (stack) {
      return {
        stack: stack,
        index: -1
      };
    });
    var currentIndex = 0;
    bars.forEach(function (bar) {
      var stack = bar.stack;

      if (!stack) {
        bar.barIndex = currentIndex;
        currentIndex++;
      } else {
        var stackData = stacks.find(function (_ref4) {
          var s = _ref4.stack;
          return s === stack;
        });

        if (stackData.index === -1) {
          stackData.index = currentIndex;
          currentIndex++;
        }

        bar.barIndex = stackData.index;
      }
    });
  }

  function groupBarByLabelAxis(bars) {
    var labelAxis = bars.map(function (_ref5) {
      var _ref5$labelAxis = _ref5.labelAxis,
          axis = _ref5$labelAxis.axis,
          index = _ref5$labelAxis.index;
      return axis + index;
    });
    labelAxis = (0, _toConsumableArray2["default"])(new Set(labelAxis));
    return labelAxis.map(function (axisIndex) {
      return bars.filter(function (_ref6) {
        var _ref6$labelAxis = _ref6.labelAxis,
            axis = _ref6$labelAxis.axis,
            index = _ref6$labelAxis.index;
        return axis + index === axisIndex;
      });
    });
  }

  function getBarStack(bars) {
    var stacks = [];
    bars.forEach(function (_ref7) {
      var stack = _ref7.stack;
      if (stack) stacks.push(stack);
    });
    return (0, _toConsumableArray2["default"])(new Set(stacks));
  }

  function setBarNum(bars) {
    var barNum = (0, _toConsumableArray2["default"])(new Set(bars.map(function (_ref8) {
      var barIndex = _ref8.barIndex;
      return barIndex;
    }))).length;
    bars.forEach(function (bar) {
      return bar.barNum = barNum;
    });
  }

  function setBarCategoryWidth(bars) {
    var lastBar = bars.slice(-1)[0];
    var barCategoryGap = lastBar.barCategoryGap,
        tickGap = lastBar.labelAxis.tickGap;
    var barCategoryWidth = 0;

    if (typeof barCategoryGap === 'number') {
      barCategoryWidth = barCategoryGap;
    } else {
      barCategoryWidth = (1 - parseInt(barCategoryGap) / 100) * tickGap;
    }

    bars.forEach(function (bar) {
      return bar.barCategoryWidth = barCategoryWidth;
    });
  }

  function setBarWidthAndGap(bars) {
    var _bars$slice$ = bars.slice(-1)[0],
        barCategoryWidth = _bars$slice$.barCategoryWidth,
        barWidth = _bars$slice$.barWidth,
        barGap = _bars$slice$.barGap,
        barNum = _bars$slice$.barNum;
    var widthAndGap = [];

    if (typeof barWidth === 'number' || barWidth !== 'auto') {
      widthAndGap = getBarWidthAndGapWithPercentOrNumber(barCategoryWidth, barWidth, barGap);
    } else if (barWidth === 'auto') {
      widthAndGap = getBarWidthAndGapWidthAuto(barCategoryWidth, barWidth, barGap, barNum);
    }

    var _widthAndGap = widthAndGap,
        _widthAndGap2 = (0, _slicedToArray2["default"])(_widthAndGap, 2),
        width = _widthAndGap2[0],
        gap = _widthAndGap2[1];

    bars.forEach(function (bar) {
      bar.barWidth = width;
      bar.barGap = gap;
    });
  }

  function getBarWidthAndGapWithPercentOrNumber(barCategoryWidth, barWidth, barGap) {
    var width = 0,
        gap = 0;

    if (typeof barWidth === 'number') {
      width = barWidth;
    } else {
      width = parseInt(barWidth) / 100 * barCategoryWidth;
    }

    if (typeof barGap === 'number') {
      gap = barGap;
    } else {
      gap = parseInt(barGap) / 100 * width;
    }

    return [width, gap];
  }

  function getBarWidthAndGapWidthAuto(barCategoryWidth, barWidth, barGap, barNum) {
    var width = 0,
        gap = 0;
    var barItemWidth = barCategoryWidth / barNum;

    if (typeof barGap === 'number') {
      gap = barGap;
      width = barItemWidth - gap;
    } else {
      var percent = 10 + parseInt(barGap) / 10;

      if (percent === 0) {
        width = barItemWidth * 2;
        gap = -width;
      } else {
        width = barItemWidth / percent * 10;
        gap = barItemWidth - width;
      }
    }

    return [width, gap];
  }

  function setBarAllWidthAndGap(bars) {
    var _bars$slice$2 = bars.slice(-1)[0],
        barGap = _bars$slice$2.barGap,
        barWidth = _bars$slice$2.barWidth,
        barNum = _bars$slice$2.barNum;
    var barAllWidthAndGap = (barGap + barWidth) * barNum - barGap;
    bars.forEach(function (bar) {
      return bar.barAllWidthAndGap = barAllWidthAndGap;
    });
  }

  function calcBarsPosition(bars, chart) {
    bars = calcBarValueAxisCoordinate(bars);
    bars = calcBarLabelAxisCoordinate(bars);
    bars = eliminateNullBarLabelAxis(bars);
    bars = keepSameNumBetweenBarAndData(bars);
    return bars;
  }

  function calcBarLabelAxisCoordinate(bars) {
    return bars.map(function (bar) {
      var labelAxis = bar.labelAxis,
          barAllWidthAndGap = bar.barAllWidthAndGap,
          barGap = bar.barGap,
          barWidth = bar.barWidth,
          barIndex = bar.barIndex;
      var tickGap = labelAxis.tickGap,
          tickPosition = labelAxis.tickPosition,
          axis = labelAxis.axis;
      var coordinateIndex = axis === 'x' ? 0 : 1;
      var barLabelAxisPos = tickPosition.map(function (tick, i) {
        var barCategoryStartPos = tickPosition[i][coordinateIndex] - tickGap / 2;
        var barItemsStartPos = barCategoryStartPos + (tickGap - barAllWidthAndGap) / 2;
        return barItemsStartPos + (barIndex + 0.5) * barWidth + barIndex * barGap;
      });
      return _objectSpread({}, bar, {
        barLabelAxisPos: barLabelAxisPos
      });
    });
  }

  function calcBarValueAxisCoordinate(bars) {
    return bars.map(function (bar) {
      var data = (0, util$1.mergeSameStackData)(bar, bars);
      data = eliminateNonNumberData(bar, data);
      var _bar$valueAxis = bar.valueAxis,
          axis = _bar$valueAxis.axis,
          minValue = _bar$valueAxis.minValue,
          maxValue = _bar$valueAxis.maxValue,
          linePosition = _bar$valueAxis.linePosition;
      var startPos = getValuePos(minValue, maxValue, minValue < 0 ? 0 : minValue, linePosition, axis);
      var endPos = data.map(function (v) {
        return getValuePos(minValue, maxValue, v, linePosition, axis);
      });
      var barValueAxisPos = endPos.map(function (p) {
        return [startPos, p];
      });
      return _objectSpread({}, bar, {
        barValueAxisPos: barValueAxisPos
      });
    });
  }

  function eliminateNonNumberData(barItem, barData) {
    var data = barItem.data;
    return barData.map(function (v, i) {
      return typeof data[i] === 'number' ? v : null;
    }).filter(function (d) {
      return d !== null;
    });
  }

  function eliminateNullBarLabelAxis(bars) {
    return bars.map(function (bar) {
      var barLabelAxisPos = bar.barLabelAxisPos,
          data = bar.data;
      data.forEach(function (d, i) {
        if (typeof d === 'number') return;
        barLabelAxisPos[i] = null;
      });
      return _objectSpread({}, bar, {
        barLabelAxisPos: barLabelAxisPos.filter(function (p) {
          return p !== null;
        })
      });
    });
  }

  function keepSameNumBetweenBarAndData(bars) {
    bars.forEach(function (bar) {
      var data = bar.data,
          barLabelAxisPos = bar.barLabelAxisPos,
          barValueAxisPos = bar.barValueAxisPos;
      var dataNum = data.filter(function (d) {
        return typeof d === 'number';
      }).length;
      var axisPosNum = barLabelAxisPos.length;

      if (axisPosNum > dataNum) {
        barLabelAxisPos.splice(dataNum);
        barValueAxisPos.splice(dataNum);
      }
    });
    return bars;
  }

  function getValuePos(min, max, value, linePosition, axis) {
    if (typeof value !== 'number') return null;
    var valueMinus = max - min;
    var coordinateIndex = axis === 'x' ? 0 : 1;
    var posMinus = linePosition[1][coordinateIndex] - linePosition[0][coordinateIndex];
    var percent = (value - min) / valueMinus;
    if (valueMinus === 0) percent = 0;
    var pos = percent * posMinus;
    return pos + linePosition[0][coordinateIndex];
  }

  function getBackgroundBarConfig(barItem) {
    var animationCurve = barItem.animationCurve,
        animationFrame = barItem.animationFrame,
        rLevel = barItem.rLevel;
    var shapes = getBackgroundBarShapes(barItem);
    var style = getBackgroundBarStyle(barItem);
    return shapes.map(function (shape) {
      return {
        name: 'rect',
        index: rLevel,
        visible: barItem.backgroundBar.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: shape,
        style: style
      };
    });
  }

  function getBackgroundBarShapes(barItem) {
    var labelAxis = barItem.labelAxis,
        valueAxis = barItem.valueAxis;
    var tickPosition = labelAxis.tickPosition;
    var axis = valueAxis.axis,
        linePosition = valueAxis.linePosition;
    var width = getBackgroundBarWidth(barItem);
    var haltWidth = width / 2;
    var posIndex = axis === 'x' ? 0 : 1;
    var centerPos = tickPosition.map(function (p) {
      return p[1 - posIndex];
    });
    var _ref9 = [linePosition[0][posIndex], linePosition[1][posIndex]],
        start = _ref9[0],
        end = _ref9[1];
    return centerPos.map(function (center) {
      if (axis === 'x') {
        return {
          x: start,
          y: center - haltWidth,
          w: end - start,
          h: width
        };
      } else {
        return {
          x: center - haltWidth,
          y: end,
          w: width,
          h: start - end
        };
      }
    });
  }

  function getBackgroundBarWidth(barItem) {
    var barAllWidthAndGap = barItem.barAllWidthAndGap,
        barCategoryWidth = barItem.barCategoryWidth,
        backgroundBar = barItem.backgroundBar;
    var width = backgroundBar.width;
    if (typeof width === 'number') return width;
    if (width === 'auto') return barAllWidthAndGap;
    return parseInt(width) / 100 * barCategoryWidth;
  }

  function getBackgroundBarStyle(barItem) {
    return barItem.backgroundBar.style;
  }

  function getBarConfig(barItem) {
    var barLabelAxisPos = barItem.barLabelAxisPos,
        animationCurve = barItem.animationCurve,
        animationFrame = barItem.animationFrame,
        rLevel = barItem.rLevel;
    var name = getBarName(barItem);
    return barLabelAxisPos.map(function (foo, i) {
      return {
        name: name,
        index: rLevel,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getBarShape(barItem, i),
        style: getBarStyle(barItem, i)
      };
    });
  }

  function getBarName(barItem) {
    var shapeType = barItem.shapeType;
    if (shapeType === 'leftEchelon' || shapeType === 'rightEchelon') return 'polyline';
    return 'rect';
  }

  function getBarShape(barItem, i) {
    var shapeType = barItem.shapeType;

    if (shapeType === 'leftEchelon') {
      return getLeftEchelonShape(barItem, i);
    } else if (shapeType === 'rightEchelon') {
      return getRightEchelonShape(barItem, i);
    } else {
      return getNormalBarShape(barItem, i);
    }
  }

  function getLeftEchelonShape(barItem, i) {
    var barValueAxisPos = barItem.barValueAxisPos,
        barLabelAxisPos = barItem.barLabelAxisPos,
        barWidth = barItem.barWidth,
        echelonOffset = barItem.echelonOffset;

    var _barValueAxisPos$i = (0, _slicedToArray2["default"])(barValueAxisPos[i], 2),
        start = _barValueAxisPos$i[0],
        end = _barValueAxisPos$i[1];

    var labelAxisPos = barLabelAxisPos[i];
    var halfWidth = barWidth / 2;
    var valueAxis = barItem.valueAxis.axis;
    var points = [];

    if (valueAxis === 'x') {
      points[0] = [end, labelAxisPos - halfWidth];
      points[1] = [end, labelAxisPos + halfWidth];
      points[2] = [start, labelAxisPos + halfWidth];
      points[3] = [start + echelonOffset, labelAxisPos - halfWidth];
      if (end - start < echelonOffset) points.splice(3, 1);
    } else {
      points[0] = [labelAxisPos - halfWidth, end];
      points[1] = [labelAxisPos + halfWidth, end];
      points[2] = [labelAxisPos + halfWidth, start];
      points[3] = [labelAxisPos - halfWidth, start - echelonOffset];
      if (start - end < echelonOffset) points.splice(3, 1);
    }

    return {
      points: points,
      close: true
    };
  }

  function getRightEchelonShape(barItem, i) {
    var barValueAxisPos = barItem.barValueAxisPos,
        barLabelAxisPos = barItem.barLabelAxisPos,
        barWidth = barItem.barWidth,
        echelonOffset = barItem.echelonOffset;

    var _barValueAxisPos$i2 = (0, _slicedToArray2["default"])(barValueAxisPos[i], 2),
        start = _barValueAxisPos$i2[0],
        end = _barValueAxisPos$i2[1];

    var labelAxisPos = barLabelAxisPos[i];
    var halfWidth = barWidth / 2;
    var valueAxis = barItem.valueAxis.axis;
    var points = [];

    if (valueAxis === 'x') {
      points[0] = [end, labelAxisPos + halfWidth];
      points[1] = [end, labelAxisPos - halfWidth];
      points[2] = [start, labelAxisPos - halfWidth];
      points[3] = [start + echelonOffset, labelAxisPos + halfWidth];
      if (end - start < echelonOffset) points.splice(2, 1);
    } else {
      points[0] = [labelAxisPos + halfWidth, end];
      points[1] = [labelAxisPos - halfWidth, end];
      points[2] = [labelAxisPos - halfWidth, start];
      points[3] = [labelAxisPos + halfWidth, start - echelonOffset];
      if (start - end < echelonOffset) points.splice(2, 1);
    }

    return {
      points: points,
      close: true
    };
  }

  function getNormalBarShape(barItem, i) {
    var barValueAxisPos = barItem.barValueAxisPos,
        barLabelAxisPos = barItem.barLabelAxisPos,
        barWidth = barItem.barWidth;

    var _barValueAxisPos$i3 = (0, _slicedToArray2["default"])(barValueAxisPos[i], 2),
        start = _barValueAxisPos$i3[0],
        end = _barValueAxisPos$i3[1];

    var labelAxisPos = barLabelAxisPos[i];
    var valueAxis = barItem.valueAxis.axis;
    var shape = {};

    if (valueAxis === 'x') {
      shape.x = start;
      shape.y = labelAxisPos - barWidth / 2;
      shape.w = end - start;
      shape.h = barWidth;
    } else {
      shape.x = labelAxisPos - barWidth / 2;
      shape.y = end;
      shape.w = barWidth;
      shape.h = start - end;
    }

    return shape;
  }

  function getBarStyle(barItem, i) {
    var barStyle = barItem.barStyle,
        gradient = barItem.gradient,
        color = barItem.color,
        independentColor = barItem.independentColor,
        independentColors = barItem.independentColors;
    var fillColor = [barStyle.fill || color];
    var gradientColor = (0, util$1.deepMerge)(fillColor, gradient.color);

    if (independentColor) {
      var idtColor = independentColors[i % independentColors.length];
      gradientColor = idtColor instanceof Array ? idtColor : [idtColor];
    }

    if (gradientColor.length === 1) gradientColor.push(gradientColor[0]);
    var gradientParams = getGradientParams(barItem, i);
    return (0, util$1.deepMerge)({
      gradientColor: gradientColor,
      gradientParams: gradientParams,
      gradientType: 'linear',
      gradientWith: 'fill'
    }, barStyle);
  }

  function getGradientParams(barItem, i) {
    var barValueAxisPos = barItem.barValueAxisPos,
        barLabelAxisPos = barItem.barLabelAxisPos,
        data = barItem.data;
    var _barItem$valueAxis = barItem.valueAxis,
        linePosition = _barItem$valueAxis.linePosition,
        axis = _barItem$valueAxis.axis;

    var _barValueAxisPos$i4 = (0, _slicedToArray2["default"])(barValueAxisPos[i], 2),
        start = _barValueAxisPos$i4[0],
        end = _barValueAxisPos$i4[1];

    var labelAxisPos = barLabelAxisPos[i];
    var value = data[i];

    var _linePosition = (0, _slicedToArray2["default"])(linePosition, 2),
        lineStart = _linePosition[0],
        lineEnd = _linePosition[1];

    var valueAxisIndex = axis === 'x' ? 0 : 1;
    var endPos = end;

    if (!barItem.gradient.local) {
      endPos = value < 0 ? lineStart[valueAxisIndex] : lineEnd[valueAxisIndex];
    }

    if (axis === 'y') {
      return [labelAxisPos, endPos, labelAxisPos, start];
    } else {
      return [endPos, labelAxisPos, start, labelAxisPos];
    }
  }

  function getStartBarConfig(barItem) {
    var configs = getBarConfig(barItem);
    var shapeType = barItem.shapeType;
    configs.forEach(function (config) {
      var shape = config.shape;

      if (shapeType === 'leftEchelon') {
        shape = getStartLeftEchelonShape(shape, barItem);
      } else if (shapeType === 'rightEchelon') {
        shape = getStartRightEchelonShape(shape, barItem);
      } else {
        shape = getStartNormalBarShape(shape, barItem);
      }

      config.shape = shape;
    });
    return configs;
  }

  function getStartLeftEchelonShape(shape, barItem) {
    var axis = barItem.valueAxis.axis;
    shape = (0, util.deepClone)(shape);
    var _shape = shape,
        points = _shape.points;
    var index = axis === 'x' ? 0 : 1;
    var start = points[2][index];
    points.forEach(function (point) {
      return point[index] = start;
    });
    return shape;
  }

  function getStartRightEchelonShape(shape, barItem) {
    var axis = barItem.valueAxis.axis;
    shape = (0, util.deepClone)(shape);
    var _shape2 = shape,
        points = _shape2.points;
    var index = axis === 'x' ? 0 : 1;
    var start = points[2][index];
    points.forEach(function (point) {
      return point[index] = start;
    });
    return shape;
  }

  function getStartNormalBarShape(shape, barItem) {
    var axis = barItem.valueAxis.axis;
    var x = shape.x,
        y = shape.y,
        w = shape.w,
        h = shape.h;

    if (axis === 'x') {
      w = 0;
    } else {
      y = y + h;
      h = 0;
    }

    return {
      x: x,
      y: y,
      w: w,
      h: h
    };
  }

  function beforeUpdateBar(graphs, barItem, i, updater) {
    var render = updater.chart.render;
    var name = getBarName(barItem);

    if (graphs[i] && graphs[i][0].name !== name) {
      graphs[i].forEach(function (g) {
        return render.delGraph(g);
      });
      graphs[i] = null;
    }
  }

  function getLabelConfig(barItem) {
    var animationCurve = barItem.animationCurve,
        animationFrame = barItem.animationFrame,
        rLevel = barItem.rLevel;
    var shapes = getLabelShapes(barItem);
    var style = getLabelStyle(barItem);
    return shapes.map(function (shape) {
      return {
        name: 'text',
        index: rLevel,
        visible: barItem.label.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: shape,
        style: style
      };
    });
  }

  function getLabelShapes(barItem) {
    var contents = getFormatterLabels(barItem);
    var position = getLabelsPosition(barItem);
    return position.map(function (pos, i) {
      return {
        position: pos,
        content: contents[i]
      };
    });
  }

  function getFormatterLabels(barItem) {
    var data = barItem.data,
        label = barItem.label;
    var formatter = label.formatter;
    data = data.filter(function (d) {
      return typeof d === 'number';
    }).map(function (d) {
      return d.toString();
    });
    if (!formatter) return data;
    var type = (0, _typeof2["default"])(formatter);
    if (type === 'string') return data.map(function (d) {
      return formatter.replace('{value}', d);
    });
    if (type === 'function') return data.map(function (d, i) {
      return formatter({
        value: d,
        index: i
      });
    });
    return data;
  }

  function getLabelsPosition(barItem) {
    var label = barItem.label,
        barValueAxisPos = barItem.barValueAxisPos,
        barLabelAxisPos = barItem.barLabelAxisPos;
    var position = label.position,
        offset = label.offset;
    var axis = barItem.valueAxis.axis;
    return barValueAxisPos.map(function (_ref10, i) {
      var _ref11 = (0, _slicedToArray2["default"])(_ref10, 2),
          start = _ref11[0],
          end = _ref11[1];

      var labelAxisPos = barLabelAxisPos[i];
      var pos = [end, labelAxisPos];

      if (position === 'bottom') {
        pos = [start, labelAxisPos];
      }

      if (position === 'center') {
        pos = [(start + end) / 2, labelAxisPos];
      }

      if (axis === 'y') pos.reverse();
      return getOffsetedPoint(pos, offset);
    });
  }

  function getOffsetedPoint(_ref12, _ref13) {
    var _ref14 = (0, _slicedToArray2["default"])(_ref12, 2),
        x = _ref14[0],
        y = _ref14[1];

    var _ref15 = (0, _slicedToArray2["default"])(_ref13, 2),
        ox = _ref15[0],
        oy = _ref15[1];

    return [x + ox, y + oy];
  }

  function getLabelStyle(barItem) {
    var color = barItem.color,
        style = barItem.label.style,
        gc = barItem.gradient.color;
    if (gc.length) color = gc[0];
    style = (0, util$1.deepMerge)({
      fill: color
    }, style);
    return style;
  }
  });

  unwrapExports(bar_1$1);
  var bar_2 = bar_1$1.bar;

  var pie_1$1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.pie = pie;

  var _defineProperty2 = interopRequireDefault(defineProperty);

  var _typeof2 = interopRequireDefault(_typeof_1);

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);









  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  function pie(chart) {
    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var series = option.series;
    if (!series) series = [];
    var pies = (0, util$1.initNeedSeries)(series, pie$1.pieConfig, 'pie');
    pies = calcPiesCenter(pies, chart);
    pies = calcPiesRadius(pies, chart);
    pies = calcRosePiesRadius(pies);
    pies = calcPiesPercent(pies);
    pies = calcPiesAngle(pies);
    pies = calcPiesInsideLabelPos(pies);
    pies = calcPiesEdgeCenterPos(pies);
    pies = calcPiesOutSideLabelPos(pies);
    (0, updater_class.doUpdate)({
      chart: chart,
      series: pies,
      key: 'pie',
      getGraphConfig: getPieConfig,
      getStartGraphConfig: getStartPieConfig,
      beforeChange: beforeChangePie
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: pies,
      key: 'pieInsideLabel',
      getGraphConfig: getInsideLabelConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: pies,
      key: 'pieOutsideLabelLine',
      getGraphConfig: getOutsideLabelLineConfig,
      getStartGraphConfig: getStartOutsideLabelLineConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: pies,
      key: 'pieOutsideLabel',
      getGraphConfig: getOutsideLabelConfig,
      getStartGraphConfig: getStartOutsideLabelConfig
    });
  }

  function calcPiesCenter(pies, chart) {
    var area = chart.render.area;
    pies.forEach(function (pie) {
      var center = pie.center;
      center = center.map(function (pos, i) {
        if (typeof pos === 'number') return pos;
        return parseInt(pos) / 100 * area[i];
      });
      pie.center = center;
    });
    return pies;
  }

  function calcPiesRadius(pies, chart) {
    var maxRadius = Math.min.apply(Math, (0, _toConsumableArray2["default"])(chart.render.area)) / 2;
    pies.forEach(function (pie) {
      var radius = pie.radius,
          data = pie.data;
      radius = getNumberRadius(radius, maxRadius);
      data.forEach(function (item) {
        var itemRadius = item.radius;
        if (!itemRadius) itemRadius = radius;
        itemRadius = getNumberRadius(itemRadius, maxRadius);
        item.radius = itemRadius;
      });
      pie.radius = radius;
    });
    return pies;
  }

  function getNumberRadius(radius, maxRadius) {
    if (!(radius instanceof Array)) radius = [0, radius];
    radius = radius.map(function (r) {
      if (typeof r === 'number') return r;
      return parseInt(r) / 100 * maxRadius;
    });
    return radius;
  }

  function calcRosePiesRadius(pies, chart) {
    var rosePie = pies.filter(function (_ref) {
      var roseType = _ref.roseType;
      return roseType;
    });
    rosePie.forEach(function (pie) {
      var radius = pie.radius,
          data = pie.data,
          roseSort = pie.roseSort;
      var roseIncrement = getRoseIncrement(pie);
      var dataCopy = (0, _toConsumableArray2["default"])(data);
      data = sortData(data);
      data.forEach(function (item, i) {
        item.radius[1] = radius[1] - roseIncrement * i;
      });

      if (roseSort) {
        data.reverse();
      } else {
        pie.data = dataCopy;
      }

      pie.roseIncrement = roseIncrement;
    });
    return pies;
  }

  function sortData(data) {
    return data.sort(function (_ref2, _ref3) {
      var a = _ref2.value;
      var b = _ref3.value;
      if (a === b) return 0;
      if (a > b) return -1;
      if (a < b) return 1;
    });
  }

  function getRoseIncrement(pie) {
    var radius = pie.radius,
        roseIncrement = pie.roseIncrement;
    if (typeof roseIncrement === 'number') return roseIncrement;

    if (roseIncrement === 'auto') {
      var data = pie.data;
      var allRadius = data.reduce(function (all, _ref4) {
        var radius = _ref4.radius;
        return [].concat((0, _toConsumableArray2["default"])(all), (0, _toConsumableArray2["default"])(radius));
      }, []);
      var minRadius = Math.min.apply(Math, (0, _toConsumableArray2["default"])(allRadius));
      var maxRadius = Math.max.apply(Math, (0, _toConsumableArray2["default"])(allRadius));
      return (maxRadius - minRadius) * 0.6 / (data.length - 1 || 1);
    }

    return parseInt(roseIncrement) / 100 * radius[1];
  }

  function calcPiesPercent(pies) {
    pies.forEach(function (pie) {
      var data = pie.data,
          percentToFixed = pie.percentToFixed;
      var sum = getDataSum(data);
      data.forEach(function (item) {
        var value = item.value;
        item.percent = value / sum * 100;
        item.percentForLabel = toFixedNoCeil(value / sum * 100, percentToFixed);
      });
      var percentSumNoLast = (0, util$1.mulAdd)(data.slice(0, -1).map(function (_ref5) {
        var percent = _ref5.percent;
        return percent;
      }));
      data.slice(-1)[0].percent = 100 - percentSumNoLast;
      data.slice(-1)[0].percentForLabel = toFixedNoCeil(100 - percentSumNoLast, percentToFixed);
    });
    return pies;
  }

  function toFixedNoCeil(number) {
    var toFixed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    var stringNumber = number.toString();
    var splitedNumber = stringNumber.split('.');
    var decimal = splitedNumber[1] || '0';
    var fixedDecimal = decimal.slice(0, toFixed);
    splitedNumber[1] = fixedDecimal;
    return parseFloat(splitedNumber.join('.'));
  }

  function getDataSum(data) {
    return (0, util$1.mulAdd)(data.map(function (_ref6) {
      var value = _ref6.value;
      return value;
    }));
  }

  function calcPiesAngle(pies) {
    pies.forEach(function (pie) {
      var start = pie.startAngle,
          data = pie.data;
      data.forEach(function (item, i) {
        var _getDataAngle = getDataAngle(data, i),
            _getDataAngle2 = (0, _slicedToArray2["default"])(_getDataAngle, 2),
            startAngle = _getDataAngle2[0],
            endAngle = _getDataAngle2[1];

        item.startAngle = start + startAngle;
        item.endAngle = start + endAngle;
      });
    });
    return pies;
  }

  function getDataAngle(data, i) {
    var fullAngle = Math.PI * 2;
    var needAddData = data.slice(0, i + 1);
    var percentSum = (0, util$1.mulAdd)(needAddData.map(function (_ref7) {
      var percent = _ref7.percent;
      return percent;
    }));
    var percent = data[i].percent;
    var startPercent = percentSum - percent;
    return [fullAngle * startPercent / 100, fullAngle * percentSum / 100];
  }

  function calcPiesInsideLabelPos(pies) {
    pies.forEach(function (pieItem) {
      var data = pieItem.data;
      data.forEach(function (item) {
        item.insideLabelPos = getPieInsideLabelPos(pieItem, item);
      });
    });
    return pies;
  }

  function getPieInsideLabelPos(pieItem, dataItem) {
    var center = pieItem.center;

    var startAngle = dataItem.startAngle,
        endAngle = dataItem.endAngle,
        _dataItem$radius = (0, _slicedToArray2["default"])(dataItem.radius, 2),
        ir = _dataItem$radius[0],
        or = _dataItem$radius[1];

    var radius = (ir + or) / 2;
    var angle = (startAngle + endAngle) / 2;
    return util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([radius, angle]));
  }

  function calcPiesEdgeCenterPos(pies) {
    pies.forEach(function (pie) {
      var data = pie.data,
          center = pie.center;
      data.forEach(function (item) {
        var startAngle = item.startAngle,
            endAngle = item.endAngle,
            radius = item.radius;
        var centerAngle = (startAngle + endAngle) / 2;

        var pos = util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([radius[1], centerAngle]));

        item.edgeCenterPos = pos;
      });
    });
    return pies;
  }

  function calcPiesOutSideLabelPos(pies) {
    pies.forEach(function (pieItem) {
      var leftPieDataItems = getLeftOrRightPieDataItems(pieItem);
      var rightPieDataItems = getLeftOrRightPieDataItems(pieItem, false);
      leftPieDataItems = sortPiesFromTopToBottom(leftPieDataItems);
      rightPieDataItems = sortPiesFromTopToBottom(rightPieDataItems);
      addLabelLineAndAlign(leftPieDataItems, pieItem);
      addLabelLineAndAlign(rightPieDataItems, pieItem, false);
    });
    return pies;
  }

  function getLabelLineBendRadius(pieItem) {
    var labelLineBendGap = pieItem.outsideLabel.labelLineBendGap;
    var maxRadius = getPieMaxRadius(pieItem);

    if (typeof labelLineBendGap !== 'number') {
      labelLineBendGap = parseInt(labelLineBendGap) / 100 * maxRadius;
    }

    return labelLineBendGap + maxRadius;
  }

  function getPieMaxRadius(pieItem) {
    var data = pieItem.data;
    var radius = data.map(function (_ref8) {
      var _ref8$radius = (0, _slicedToArray2["default"])(_ref8.radius, 2),
          foo = _ref8$radius[0],
          r = _ref8$radius[1];

      return r;
    });
    return Math.max.apply(Math, (0, _toConsumableArray2["default"])(radius));
  }

  function getLeftOrRightPieDataItems(pieItem) {
    var left = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
    var data = pieItem.data,
        center = pieItem.center;
    var centerXPos = center[0];
    return data.filter(function (_ref9) {
      var edgeCenterPos = _ref9.edgeCenterPos;
      var xPos = edgeCenterPos[0];
      if (left) return xPos <= centerXPos;
      return xPos > centerXPos;
    });
  }

  function sortPiesFromTopToBottom(dataItem) {
    dataItem.sort(function (_ref10, _ref11) {
      var _ref10$edgeCenterPos = (0, _slicedToArray2["default"])(_ref10.edgeCenterPos, 2),
          t = _ref10$edgeCenterPos[0],
          ay = _ref10$edgeCenterPos[1];

      var _ref11$edgeCenterPos = (0, _slicedToArray2["default"])(_ref11.edgeCenterPos, 2),
          tt = _ref11$edgeCenterPos[0],
          by = _ref11$edgeCenterPos[1];

      if (ay > by) return 1;
      if (ay < by) return -1;
      if (ay === by) return 0;
    });
    return dataItem;
  }

  function addLabelLineAndAlign(dataItem, pieItem) {
    var left = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
    var center = pieItem.center,
        outsideLabel = pieItem.outsideLabel;
    var radius = getLabelLineBendRadius(pieItem);
    dataItem.forEach(function (item) {
      var edgeCenterPos = item.edgeCenterPos,
          startAngle = item.startAngle,
          endAngle = item.endAngle;
      var labelLineEndLength = outsideLabel.labelLineEndLength;
      var angle = (startAngle + endAngle) / 2;

      var bendPoint = util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([radius, angle]));

      var endPoint = (0, _toConsumableArray2["default"])(bendPoint);
      endPoint[0] += labelLineEndLength * (left ? -1 : 1);
      item.labelLine = [edgeCenterPos, bendPoint, endPoint];
      item.labelLineLength = (0, util$1.getPolylineLength)(item.labelLine);
      item.align = {
        textAlign: 'left',
        textBaseline: 'middle'
      };
      if (left) item.align.textAlign = 'right';
    });
  }

  function getPieConfig(pieItem) {
    var data = pieItem.data,
        animationCurve = pieItem.animationCurve,
        animationFrame = pieItem.animationFrame,
        rLevel = pieItem.rLevel;
    return data.map(function (foo, i) {
      return {
        name: 'pie',
        index: rLevel,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getPieShape(pieItem, i),
        style: getPieStyle(pieItem, i)
      };
    });
  }

  function getStartPieConfig(pieItem) {
    var animationDelayGap = pieItem.animationDelayGap,
        startAnimationCurve = pieItem.startAnimationCurve;
    var configs = getPieConfig(pieItem);
    configs.forEach(function (config, i) {
      config.animationCurve = startAnimationCurve;
      config.animationDelay = i * animationDelayGap;
      config.shape.or = config.shape.ir;
    });
    return configs;
  }

  function beforeChangePie(graph) {
    graph.animationDelay = 0;
  }

  function getPieShape(pieItem, i) {
    var center = pieItem.center,
        data = pieItem.data;
    var dataItem = data[i];
    var radius = dataItem.radius,
        startAngle = dataItem.startAngle,
        endAngle = dataItem.endAngle;
    return {
      startAngle: startAngle,
      endAngle: endAngle,
      ir: radius[0],
      or: radius[1],
      rx: center[0],
      ry: center[1]
    };
  }

  function getPieStyle(pieItem, i) {
    var pieStyle = pieItem.pieStyle,
        data = pieItem.data;
    var dataItem = data[i];
    var color = dataItem.color;
    return (0, util$1.deepMerge)({
      fill: color
    }, pieStyle);
  }

  function getInsideLabelConfig(pieItem) {
    var animationCurve = pieItem.animationCurve,
        animationFrame = pieItem.animationFrame,
        data = pieItem.data,
        rLevel = pieItem.rLevel;
    return data.map(function (foo, i) {
      return {
        name: 'text',
        index: rLevel,
        visible: pieItem.insideLabel.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getInsideLabelShape(pieItem, i),
        style: getInsideLabelStyle(pieItem)
      };
    });
  }

  function getInsideLabelShape(pieItem, i) {
    var insideLabel = pieItem.insideLabel,
        data = pieItem.data;
    var formatter = insideLabel.formatter;
    var dataItem = data[i];
    var formatterType = (0, _typeof2["default"])(formatter);
    var label = '';

    if (formatterType === 'string') {
      label = formatter.replace('{name}', dataItem.name);
      label = label.replace('{percent}', dataItem.percentForLabel);
      label = label.replace('{value}', dataItem.value);
    }

    if (formatterType === 'function') {
      label = formatter(dataItem);
    }

    return {
      content: label,
      position: dataItem.insideLabelPos
    };
  }

  function getInsideLabelStyle(pieItem, i) {
    var style = pieItem.insideLabel.style;
    return style;
  }

  function getOutsideLabelLineConfig(pieItem) {
    var animationCurve = pieItem.animationCurve,
        animationFrame = pieItem.animationFrame,
        data = pieItem.data,
        rLevel = pieItem.rLevel;
    return data.map(function (foo, i) {
      return {
        name: 'polyline',
        index: rLevel,
        visible: pieItem.outsideLabel.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getOutsideLabelLineShape(pieItem, i),
        style: getOutsideLabelLineStyle(pieItem, i)
      };
    });
  }

  function getStartOutsideLabelLineConfig(pieItem) {
    var data = pieItem.data;
    var configs = getOutsideLabelLineConfig(pieItem);
    configs.forEach(function (config, i) {
      config.style.lineDash = [0, data[i].labelLineLength];
    });
    return configs;
  }

  function getOutsideLabelLineShape(pieItem, i) {
    var data = pieItem.data;
    var dataItem = data[i];
    return {
      points: dataItem.labelLine
    };
  }

  function getOutsideLabelLineStyle(pieItem, i) {
    var outsideLabel = pieItem.outsideLabel,
        data = pieItem.data;
    var labelLineStyle = outsideLabel.labelLineStyle;
    var color = data[i].color;
    return (0, util$1.deepMerge)({
      stroke: color,
      lineDash: [data[i].labelLineLength, 0]
    }, labelLineStyle);
  }

  function getOutsideLabelConfig(pieItem) {
    var animationCurve = pieItem.animationCurve,
        animationFrame = pieItem.animationFrame,
        data = pieItem.data,
        rLevel = pieItem.rLevel;
    return data.map(function (foo, i) {
      return {
        name: 'text',
        index: rLevel,
        visible: pieItem.outsideLabel.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getOutsideLabelShape(pieItem, i),
        style: getOutsideLabelStyle(pieItem, i)
      };
    });
  }

  function getStartOutsideLabelConfig(pieItem) {
    var data = pieItem.data;
    var configs = getOutsideLabelConfig(pieItem);
    configs.forEach(function (config, i) {
      config.shape.position = data[i].labelLine[1];
    });
    return configs;
  }

  function getOutsideLabelShape(pieItem, i) {
    var outsideLabel = pieItem.outsideLabel,
        data = pieItem.data;
    var formatter = outsideLabel.formatter;
    var _data$i = data[i],
        labelLine = _data$i.labelLine,
        name = _data$i.name,
        percentForLabel = _data$i.percentForLabel,
        value = _data$i.value;
    var formatterType = (0, _typeof2["default"])(formatter);
    var label = '';

    if (formatterType === 'string') {
      label = formatter.replace('{name}', name);
      label = label.replace('{percent}', percentForLabel);
      label = label.replace('{value}', value);
    }

    if (formatterType === 'function') {
      label = formatter(data[i]);
    }

    return {
      content: label,
      position: labelLine[2]
    };
  }

  function getOutsideLabelStyle(pieItem, i) {
    var outsideLabel = pieItem.outsideLabel,
        data = pieItem.data;
    var _data$i2 = data[i],
        color = _data$i2.color,
        align = _data$i2.align;
    var style = outsideLabel.style;
    return (0, util$1.deepMerge)(_objectSpread({
      fill: color
    }, align), style);
  }
  });

  unwrapExports(pie_1$1);
  var pie_2 = pie_1$1.pie;

  var radarAxis_1$1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.radarAxis = radarAxis;

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _defineProperty2 = interopRequireDefault(defineProperty);

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);









  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  function radarAxis(chart) {
    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var radar = option.radar;
    var radarAxis = [];

    if (radar) {
      radarAxis = mergeRadarAxisDefaultConfig(radar);
      radarAxis = calcRadarAxisCenter(radarAxis, chart);
      radarAxis = calcRadarAxisRingRadius(radarAxis, chart);
      radarAxis = calcRadarAxisLinePosition(radarAxis);
      radarAxis = calcRadarAxisAreaRadius(radarAxis);
      radarAxis = calcRadarAxisLabelPosition(radarAxis);
      radarAxis = [radarAxis];
    }

    var radarAxisForUpdate = radarAxis;
    if (radarAxis.length && !radarAxis[0].show) radarAxisForUpdate = [];
    (0, updater_class.doUpdate)({
      chart: chart,
      series: radarAxisForUpdate,
      key: 'radarAxisSplitArea',
      getGraphConfig: getSplitAreaConfig,
      beforeUpdate: beforeUpdateSplitArea,
      beforeChange: beforeChangeSplitArea
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: radarAxisForUpdate,
      key: 'radarAxisSplitLine',
      getGraphConfig: getSplitLineConfig,
      beforeUpdate: beforeUpdateSplitLine,
      beforeChange: beforeChangeSplitLine
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: radarAxisForUpdate,
      key: 'radarAxisLine',
      getGraphConfig: getAxisLineConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: radarAxisForUpdate,
      key: 'radarAxisLable',
      getGraphConfig: getAxisLabelConfig
    });
    chart.radarAxis = radarAxis[0];
  }

  function mergeRadarAxisDefaultConfig(radar) {
    return (0, util$1.deepMerge)((0, util.deepClone)(config.radarAxisConfig), radar);
  }

  function calcRadarAxisCenter(radarAxis, chart) {
    var area = chart.render.area;
    var center = radarAxis.center;
    radarAxis.centerPos = center.map(function (v, i) {
      if (typeof v === 'number') return v;
      return parseInt(v) / 100 * area[i];
    });
    return radarAxis;
  }

  function calcRadarAxisRingRadius(radarAxis, chart) {
    var area = chart.render.area;
    var splitNum = radarAxis.splitNum,
        radius = radarAxis.radius;
    var maxRadius = Math.min.apply(Math, (0, _toConsumableArray2["default"])(area)) / 2;
    if (typeof radius !== 'number') radius = parseInt(radius) / 100 * maxRadius;
    var splitGap = radius / splitNum;
    radarAxis.ringRadius = new Array(splitNum).fill(0).map(function (foo, i) {
      return splitGap * (i + 1);
    });
    radarAxis.radius = radius;
    return radarAxis;
  }

  function calcRadarAxisLinePosition(radarAxis) {
    var indicator = radarAxis.indicator,
        centerPos = radarAxis.centerPos,
        radius = radarAxis.radius,
        startAngle = radarAxis.startAngle;
    var fullAngle = Math.PI * 2;
    var indicatorNum = indicator.length;
    var indicatorGap = fullAngle / indicatorNum;
    var angles = new Array(indicatorNum).fill(0).map(function (foo, i) {
      return indicatorGap * i + startAngle;
    });
    radarAxis.axisLineAngles = angles;
    radarAxis.axisLinePosition = angles.map(function (g) {
      return util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(centerPos).concat([radius, g]));
    });
    return radarAxis;
  }

  function calcRadarAxisAreaRadius(radarAxis) {
    var ringRadius = radarAxis.ringRadius;
    var subRadius = ringRadius[0] / 2;
    radarAxis.areaRadius = ringRadius.map(function (r) {
      return r - subRadius;
    });
    return radarAxis;
  }

  function calcRadarAxisLabelPosition(radarAxis) {
    var axisLineAngles = radarAxis.axisLineAngles,
        centerPos = radarAxis.centerPos,
        radius = radarAxis.radius,
        axisLabel = radarAxis.axisLabel;
    radius += axisLabel.labelGap;
    radarAxis.axisLabelPosition = axisLineAngles.map(function (angle) {
      return util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(centerPos).concat([radius, angle]));
    });
    return radarAxis;
  }

  function getSplitAreaConfig(radarAxis) {
    var areaRadius = radarAxis.areaRadius,
        polygon = radarAxis.polygon,
        animationCurve = radarAxis.animationCurve,
        animationFrame = radarAxis.animationFrame,
        rLevel = radarAxis.rLevel;
    var name = polygon ? 'regPolygon' : 'ring';
    return areaRadius.map(function (foo, i) {
      return {
        name: name,
        index: rLevel,
        visible: radarAxis.splitArea.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getSplitAreaShape(radarAxis, i),
        style: getSplitAreaStyle(radarAxis, i)
      };
    });
  }

  function getSplitAreaShape(radarAxis, i) {
    var polygon = radarAxis.polygon,
        areaRadius = radarAxis.areaRadius,
        indicator = radarAxis.indicator,
        centerPos = radarAxis.centerPos;
    var indicatorNum = indicator.length;
    var shape = {
      rx: centerPos[0],
      ry: centerPos[1],
      r: areaRadius[i]
    };
    if (polygon) shape.side = indicatorNum;
    return shape;
  }

  function getSplitAreaStyle(radarAxis, i) {
    var splitArea = radarAxis.splitArea,
        ringRadius = radarAxis.ringRadius,
        axisLineAngles = radarAxis.axisLineAngles,
        polygon = radarAxis.polygon,
        centerPos = radarAxis.centerPos;
    var color = splitArea.color,
        style = splitArea.style;
    style = _objectSpread({
      fill: 'rgba(0, 0, 0, 0)'
    }, style);
    var lineWidth = ringRadius[0] - 0;

    if (polygon) {
      var point1 = util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(centerPos).concat([ringRadius[0], axisLineAngles[0]]));

      var point2 = util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(centerPos).concat([ringRadius[0], axisLineAngles[1]]));

      lineWidth = (0, util$1.getPointToLineDistance)(centerPos, point1, point2);
    }

    style = (0, util$1.deepMerge)((0, util.deepClone)(style, true), {
      lineWidth: lineWidth
    });
    if (!color.length) return style;
    var colorNum = color.length;
    return (0, util$1.deepMerge)(style, {
      stroke: color[i % colorNum]
    });
  }

  function beforeUpdateSplitArea(graphs, radarAxis, i, updater) {
    var cache = graphs[i];
    if (!cache) return;
    var render = updater.chart.render;
    var polygon = radarAxis.polygon;
    var name = cache[0].name;
    var currentName = polygon ? 'regPolygon' : 'ring';
    var delAll = currentName !== name;
    if (!delAll) return;
    cache.forEach(function (g) {
      return render.delGraph(g);
    });
    graphs[i] = null;
  }

  function beforeChangeSplitArea(graph, config) {
    var side = config.shape.side;
    if (typeof side !== 'number') return;
    graph.shape.side = side;
  }

  function getSplitLineConfig(radarAxis) {
    var ringRadius = radarAxis.ringRadius,
        polygon = radarAxis.polygon,
        animationCurve = radarAxis.animationCurve,
        animationFrame = radarAxis.animationFrame,
        rLevel = radarAxis.rLevel;
    var name = polygon ? 'regPolygon' : 'ring';
    return ringRadius.map(function (foo, i) {
      return {
        name: name,
        index: rLevel,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        visible: radarAxis.splitLine.show,
        shape: getSplitLineShape(radarAxis, i),
        style: getSplitLineStyle(radarAxis, i)
      };
    });
  }

  function getSplitLineShape(radarAxis, i) {
    var ringRadius = radarAxis.ringRadius,
        centerPos = radarAxis.centerPos,
        indicator = radarAxis.indicator,
        polygon = radarAxis.polygon;
    var shape = {
      rx: centerPos[0],
      ry: centerPos[1],
      r: ringRadius[i]
    };
    var indicatorNum = indicator.length;
    if (polygon) shape.side = indicatorNum;
    return shape;
  }

  function getSplitLineStyle(radarAxis, i) {
    var splitLine = radarAxis.splitLine;
    var color = splitLine.color,
        style = splitLine.style;
    style = _objectSpread({
      fill: 'rgba(0, 0, 0, 0)'
    }, style);
    if (!color.length) return style;
    var colorNum = color.length;
    return (0, util$1.deepMerge)(style, {
      stroke: color[i % colorNum]
    });
  }

  function beforeUpdateSplitLine(graphs, radarAxis, i, updater) {
    var cache = graphs[i];
    if (!cache) return;
    var render = updater.chart.render;
    var polygon = radarAxis.polygon;
    var name = cache[0].name;
    var currenName = polygon ? 'regPolygon' : 'ring';
    var delAll = currenName !== name;
    if (!delAll) return;
    cache.forEach(function (g) {
      return render.delGraph(g);
    });
    graphs[i] = null;
  }

  function beforeChangeSplitLine(graph, config) {
    var side = config.shape.side;
    if (typeof side !== 'number') return;
    graph.shape.side = side;
  }

  function getAxisLineConfig(radarAxis) {
    var axisLinePosition = radarAxis.axisLinePosition,
        animationCurve = radarAxis.animationCurve,
        animationFrame = radarAxis.animationFrame,
        rLevel = radarAxis.rLevel;
    return axisLinePosition.map(function (foo, i) {
      return {
        name: 'polyline',
        index: rLevel,
        visible: radarAxis.axisLine.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getAxisLineShape(radarAxis, i),
        style: getAxisLineStyle(radarAxis, i)
      };
    });
  }

  function getAxisLineShape(radarAxis, i) {
    var centerPos = radarAxis.centerPos,
        axisLinePosition = radarAxis.axisLinePosition;
    var points = [centerPos, axisLinePosition[i]];
    return {
      points: points
    };
  }

  function getAxisLineStyle(radarAxis, i) {
    var axisLine = radarAxis.axisLine;
    var color = axisLine.color,
        style = axisLine.style;
    if (!color.length) return style;
    var colorNum = color.length;
    return (0, util$1.deepMerge)(style, {
      stroke: color[i % colorNum]
    });
  }

  function getAxisLabelConfig(radarAxis) {
    var axisLabelPosition = radarAxis.axisLabelPosition,
        animationCurve = radarAxis.animationCurve,
        animationFrame = radarAxis.animationFrame,
        rLevel = radarAxis.rLevel;
    return axisLabelPosition.map(function (foo, i) {
      return {
        name: 'text',
        index: rLevel,
        visible: radarAxis.axisLabel.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getAxisLableShape(radarAxis, i),
        style: getAxisLableStyle(radarAxis, i)
      };
    });
  }

  function getAxisLableShape(radarAxis, i) {
    var axisLabelPosition = radarAxis.axisLabelPosition,
        indicator = radarAxis.indicator;
    return {
      content: indicator[i].name,
      position: axisLabelPosition[i]
    };
  }

  function getAxisLableStyle(radarAxis, i) {
    var axisLabel = radarAxis.axisLabel,
        _radarAxis$centerPos = (0, _slicedToArray2["default"])(radarAxis.centerPos, 2),
        x = _radarAxis$centerPos[0],
        y = _radarAxis$centerPos[1],
        axisLabelPosition = radarAxis.axisLabelPosition;

    var color = axisLabel.color,
        style = axisLabel.style;

    var _axisLabelPosition$i = (0, _slicedToArray2["default"])(axisLabelPosition[i], 2),
        labelXpos = _axisLabelPosition$i[0],
        labelYPos = _axisLabelPosition$i[1];

    var textAlign = labelXpos > x ? 'left' : 'right';
    var textBaseline = labelYPos > y ? 'top' : 'bottom';
    style = (0, util$1.deepMerge)({
      textAlign: textAlign,
      textBaseline: textBaseline
    }, style);
    if (!color.length) return style;
    var colorNum = color.length;
    return (0, util$1.deepMerge)(style, {
      fill: color[i % colorNum]
    });
  }
  });

  unwrapExports(radarAxis_1$1);
  var radarAxis_2 = radarAxis_1$1.radarAxis;

  var radar_1$1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.radar = radar;

  var _defineProperty2 = interopRequireDefault(defineProperty);

  var _typeof2 = interopRequireDefault(_typeof_1);

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);











  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  function radar(chart) {
    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var series = option.series;
    if (!series) series = [];
    var radars = (0, util$1.initNeedSeries)(series, config.radarConfig, 'radar');
    radars = calcRadarPosition(radars, chart);
    radars = calcRadarLabelPosition(radars, chart);
    radars = calcRadarLabelAlign(radars, chart);
    (0, updater_class.doUpdate)({
      chart: chart,
      series: radars,
      key: 'radar',
      getGraphConfig: getRadarConfig,
      getStartGraphConfig: getStartRadarConfig,
      beforeChange: beforeChangeRadar
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: radars,
      key: 'radarPoint',
      getGraphConfig: getPointConfig,
      getStartGraphConfig: getStartPointConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: radars,
      key: 'radarLabel',
      getGraphConfig: getLabelConfig
    });
  }

  function calcRadarPosition(radars, chart) {
    var radarAxis = chart.radarAxis;
    if (!radarAxis) return [];
    var indicator = radarAxis.indicator,
        axisLineAngles = radarAxis.axisLineAngles,
        radius = radarAxis.radius,
        centerPos = radarAxis.centerPos;
    radars.forEach(function (radarItem) {
      var data = radarItem.data;
      radarItem.dataRadius = [];
      radarItem.radarPosition = indicator.map(function (_ref, i) {
        var max = _ref.max,
            min = _ref.min;
        var v = data[i];
        if (typeof max !== 'number') max = v;
        if (typeof min !== 'number') min = 0;
        if (typeof v !== 'number') v = min;
        var dataRadius = (v - min) / (max - min) * radius;
        radarItem.dataRadius[i] = dataRadius;
        return util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(centerPos).concat([dataRadius, axisLineAngles[i]]));
      });
    });
    return radars;
  }

  function calcRadarLabelPosition(radars, chart) {
    var radarAxis = chart.radarAxis;
    if (!radarAxis) return [];
    var centerPos = radarAxis.centerPos,
        axisLineAngles = radarAxis.axisLineAngles;
    radars.forEach(function (radarItem) {
      var dataRadius = radarItem.dataRadius,
          label = radarItem.label;
      var labelGap = label.labelGap;
      radarItem.labelPosition = dataRadius.map(function (r, i) {
        return util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(centerPos).concat([r + labelGap, axisLineAngles[i]]));
      });
    });
    return radars;
  }

  function calcRadarLabelAlign(radars, chart) {
    var radarAxis = chart.radarAxis;
    if (!radarAxis) return [];

    var _radarAxis$centerPos = (0, _slicedToArray2["default"])(radarAxis.centerPos, 2),
        x = _radarAxis$centerPos[0],
        y = _radarAxis$centerPos[1];

    radars.forEach(function (radarItem) {
      var labelPosition = radarItem.labelPosition;
      var labelAlign = labelPosition.map(function (_ref2) {
        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
            lx = _ref3[0],
            ly = _ref3[1];

        var textAlign = lx > x ? 'left' : 'right';
        var textBaseline = ly > y ? 'top' : 'bottom';
        return {
          textAlign: textAlign,
          textBaseline: textBaseline
        };
      });
      radarItem.labelAlign = labelAlign;
    });
    return radars;
  }

  function getRadarConfig(radarItem) {
    var animationCurve = radarItem.animationCurve,
        animationFrame = radarItem.animationFrame,
        rLevel = radarItem.rLevel;
    return [{
      name: 'polyline',
      index: rLevel,
      animationCurve: animationCurve,
      animationFrame: animationFrame,
      shape: getRadarShape(radarItem),
      style: getRadarStyle(radarItem)
    }];
  }

  function getStartRadarConfig(radarItem, updater) {
    var centerPos = updater.chart.radarAxis.centerPos;
    var config = getRadarConfig(radarItem)[0];
    var pointNum = config.shape.points.length;
    var points = new Array(pointNum).fill(0).map(function (foo) {
      return (0, _toConsumableArray2["default"])(centerPos);
    });
    config.shape.points = points;
    return [config];
  }

  function getRadarShape(radarItem) {
    var radarPosition = radarItem.radarPosition;
    return {
      points: radarPosition,
      close: true
    };
  }

  function getRadarStyle(radarItem) {
    var radarStyle = radarItem.radarStyle,
        color = radarItem.color;
    var colorRgbaValue = (0, lib.getRgbaValue)(color);
    colorRgbaValue[3] = 0.5;
    var radarDefaultColor = {
      stroke: color,
      fill: (0, lib.getColorFromRgbValue)(colorRgbaValue)
    };
    return (0, util$1.deepMerge)(radarDefaultColor, radarStyle);
  }

  function beforeChangeRadar(graph, _ref4) {
    var shape = _ref4.shape;
    var graphPoints = graph.shape.points;
    var graphPointsNum = graphPoints.length;
    var pointsNum = shape.points.length;

    if (pointsNum > graphPointsNum) {
      var lastPoint = graphPoints.slice(-1)[0];
      var newAddPoints = new Array(pointsNum - graphPointsNum).fill(0).map(function (foo) {
        return (0, _toConsumableArray2["default"])(lastPoint);
      });
      graphPoints.push.apply(graphPoints, (0, _toConsumableArray2["default"])(newAddPoints));
    } else if (pointsNum < graphPointsNum) {
      graphPoints.splice(pointsNum);
    }
  }

  function getPointConfig(radarItem) {
    var radarPosition = radarItem.radarPosition,
        animationCurve = radarItem.animationCurve,
        animationFrame = radarItem.animationFrame,
        rLevel = radarItem.rLevel;
    return radarPosition.map(function (foo, i) {
      return {
        name: 'circle',
        index: rLevel,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        visible: radarItem.point.show,
        shape: getPointShape(radarItem, i),
        style: getPointStyle(radarItem)
      };
    });
  }

  function getStartPointConfig(radarItem) {
    var configs = getPointConfig(radarItem);
    configs.forEach(function (config) {
      return config.shape.r = 0.01;
    });
    return configs;
  }

  function getPointShape(radarItem, i) {
    var radarPosition = radarItem.radarPosition,
        point = radarItem.point;
    var radius = point.radius;
    var position = radarPosition[i];
    return {
      rx: position[0],
      ry: position[1],
      r: radius
    };
  }

  function getPointStyle(radarItem, i) {
    var point = radarItem.point,
        color = radarItem.color;
    var style = point.style;
    return (0, util$1.deepMerge)({
      stroke: color
    }, style);
  }

  function getLabelConfig(radarItem) {
    var labelPosition = radarItem.labelPosition,
        animationCurve = radarItem.animationCurve,
        animationFrame = radarItem.animationFrame,
        rLevel = radarItem.rLevel;
    return labelPosition.map(function (foo, i) {
      return {
        name: 'text',
        index: rLevel,
        visible: radarItem.label.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getLabelShape(radarItem, i),
        style: getLabelStyle(radarItem, i)
      };
    });
  }

  function getLabelShape(radarItem, i) {
    var labelPosition = radarItem.labelPosition,
        label = radarItem.label,
        data = radarItem.data;
    var offset = label.offset,
        formatter = label.formatter;
    var position = mergePointOffset(labelPosition[i], offset);
    var labelText = data[i] ? data[i].toString() : '0';
    var formatterType = (0, _typeof2["default"])(formatter);
    if (formatterType === 'string') labelText = formatter.replace('{value}', labelText);
    if (formatterType === 'function') labelText = formatter(labelText);
    return {
      content: labelText,
      position: position
    };
  }

  function mergePointOffset(_ref5, _ref6) {
    var _ref7 = (0, _slicedToArray2["default"])(_ref5, 2),
        x = _ref7[0],
        y = _ref7[1];

    var _ref8 = (0, _slicedToArray2["default"])(_ref6, 2),
        ox = _ref8[0],
        oy = _ref8[1];

    return [x + ox, y + oy];
  }

  function getLabelStyle(radarItem, i) {
    var label = radarItem.label,
        color = radarItem.color,
        labelAlign = radarItem.labelAlign;
    var style = label.style;

    var defaultColorAndAlign = _objectSpread({
      fill: color
    }, labelAlign[i]);

    return (0, util$1.deepMerge)(defaultColorAndAlign, style);
  }
  });

  unwrapExports(radar_1$1);
  var radar_2 = radar_1$1.radar;

  var gauge_1$1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.gauge = gauge$1;

  var _defineProperty2 = interopRequireDefault(defineProperty);

  var _typeof2 = interopRequireDefault(_typeof_1);

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _toConsumableArray2 = interopRequireDefault(toConsumableArray);











  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  function gauge$1(chart) {
    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var series = option.series;
    if (!series) series = [];
    var gauges = (0, util$1.initNeedSeries)(series, gauge.gaugeConfig, 'gauge');
    gauges = calcGaugesCenter(gauges, chart);
    gauges = calcGaugesRadius(gauges, chart);
    gauges = calcGaugesDataRadiusAndLineWidth(gauges, chart);
    gauges = calcGaugesDataAngles(gauges);
    gauges = calcGaugesDataGradient(gauges);
    gauges = calcGaugesAxisTickPosition(gauges);
    gauges = calcGaugesLabelPositionAndAlign(gauges);
    gauges = calcGaugesLabelData(gauges);
    gauges = calcGaugesDetailsPosition(gauges);
    gauges = calcGaugesDetailsContent(gauges);
    (0, updater_class.doUpdate)({
      chart: chart,
      series: gauges,
      key: 'gaugeAxisTick',
      getGraphConfig: getAxisTickConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: gauges,
      key: 'gaugeAxisLabel',
      getGraphConfig: getAxisLabelConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: gauges,
      key: 'gaugeBackgroundArc',
      getGraphConfig: getBackgroundArcConfig,
      getStartGraphConfig: getStartBackgroundArcConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: gauges,
      key: 'gaugeArc',
      getGraphConfig: getArcConfig,
      getStartGraphConfig: getStartArcConfig,
      beforeChange: beforeChangeArc
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: gauges,
      key: 'gaugePointer',
      getGraphConfig: getPointerConfig,
      getStartGraphConfig: getStartPointerConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: gauges,
      key: 'gaugeDetails',
      getGraphConfig: getDetailsConfig
    });
  }

  function calcGaugesCenter(gauges, chart) {
    var area = chart.render.area;
    gauges.forEach(function (gaugeItem) {
      var center = gaugeItem.center;
      center = center.map(function (pos, i) {
        if (typeof pos === 'number') return pos;
        return parseInt(pos) / 100 * area[i];
      });
      gaugeItem.center = center;
    });
    return gauges;
  }

  function calcGaugesRadius(gauges, chart) {
    var area = chart.render.area;
    var maxRadius = Math.min.apply(Math, (0, _toConsumableArray2["default"])(area)) / 2;
    gauges.forEach(function (gaugeItem) {
      var radius = gaugeItem.radius;

      if (typeof radius !== 'number') {
        radius = parseInt(radius) / 100 * maxRadius;
      }

      gaugeItem.radius = radius;
    });
    return gauges;
  }

  function calcGaugesDataRadiusAndLineWidth(gauges, chart) {
    var area = chart.render.area;
    var maxRadius = Math.min.apply(Math, (0, _toConsumableArray2["default"])(area)) / 2;
    gauges.forEach(function (gaugeItem) {
      var radius = gaugeItem.radius,
          data = gaugeItem.data,
          arcLineWidth = gaugeItem.arcLineWidth;
      data.forEach(function (item) {
        var arcRadius = item.radius,
            lineWidth = item.lineWidth;
        if (!arcRadius) arcRadius = radius;
        if (typeof arcRadius !== 'number') arcRadius = parseInt(arcRadius) / 100 * maxRadius;
        item.radius = arcRadius;
        if (!lineWidth) lineWidth = arcLineWidth;
        item.lineWidth = lineWidth;
      });
    });
    return gauges;
  }

  function calcGaugesDataAngles(gauges, chart) {
    gauges.forEach(function (gaugeItem) {
      var startAngle = gaugeItem.startAngle,
          endAngle = gaugeItem.endAngle,
          data = gaugeItem.data,
          min = gaugeItem.min,
          max = gaugeItem.max;
      var angleMinus = endAngle - startAngle;
      var valueMinus = max - min;
      data.forEach(function (item) {
        var value = item.value;
        var itemAngle = Math.abs((value - min) / valueMinus * angleMinus);
        item.startAngle = startAngle;
        item.endAngle = startAngle + itemAngle;
      });
    });
    return gauges;
  }

  function calcGaugesDataGradient(gauges, chart) {
    gauges.forEach(function (gaugeItem) {
      var data = gaugeItem.data;
      data.forEach(function (item) {
        var color = item.color,
            gradient = item.gradient;
        if (!gradient || !gradient.length) gradient = color;
        if (!(gradient instanceof Array)) gradient = [gradient];
        item.gradient = gradient;
      });
    });
    return gauges;
  }

  function calcGaugesAxisTickPosition(gauges, chart) {
    gauges.forEach(function (gaugeItem) {
      var startAngle = gaugeItem.startAngle,
          endAngle = gaugeItem.endAngle,
          splitNum = gaugeItem.splitNum,
          center = gaugeItem.center,
          radius = gaugeItem.radius,
          arcLineWidth = gaugeItem.arcLineWidth,
          axisTick = gaugeItem.axisTick;
      var tickLength = axisTick.tickLength,
          lineWidth = axisTick.style.lineWidth;
      var angles = endAngle - startAngle;
      var outerRadius = radius - arcLineWidth / 2;
      var innerRadius = outerRadius - tickLength;
      var angleGap = angles / (splitNum - 1);
      var arcLength = 2 * Math.PI * radius * angles / (Math.PI * 2);
      var offset = Math.ceil(lineWidth / 2) / arcLength * angles;
      gaugeItem.tickAngles = [];
      gaugeItem.tickInnerRadius = [];
      gaugeItem.tickPosition = new Array(splitNum).fill(0).map(function (foo, i) {
        var angle = startAngle + angleGap * i;
        if (i === 0) angle += offset;
        if (i === splitNum - 1) angle -= offset;
        gaugeItem.tickAngles[i] = angle;
        gaugeItem.tickInnerRadius[i] = innerRadius;
        return [util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([outerRadius, angle])), util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([innerRadius, angle]))];
      });
    });
    return gauges;
  }

  function calcGaugesLabelPositionAndAlign(gauges, chart) {
    gauges.forEach(function (gaugeItem) {
      var center = gaugeItem.center,
          tickInnerRadius = gaugeItem.tickInnerRadius,
          tickAngles = gaugeItem.tickAngles,
          labelGap = gaugeItem.axisLabel.labelGap;
      var position = tickAngles.map(function (angle, i) {
        return util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([tickInnerRadius[i] - labelGap, tickAngles[i]]));
      });
      var align = position.map(function (_ref) {
        var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
            x = _ref2[0],
            y = _ref2[1];

        return {
          textAlign: x > center[0] ? 'right' : 'left',
          textBaseline: y > center[1] ? 'bottom' : 'top'
        };
      });
      gaugeItem.labelPosition = position;
      gaugeItem.labelAlign = align;
    });
    return gauges;
  }

  function calcGaugesLabelData(gauges, chart) {
    gauges.forEach(function (gaugeItem) {
      var axisLabel = gaugeItem.axisLabel,
          min = gaugeItem.min,
          max = gaugeItem.max,
          splitNum = gaugeItem.splitNum;
      var data = axisLabel.data,
          formatter = axisLabel.formatter;
      var valueGap = (max - min) / (splitNum - 1);
      var value = new Array(splitNum).fill(0).map(function (foo, i) {
        return parseInt(min + valueGap * i);
      });
      var formatterType = (0, _typeof2["default"])(formatter);
      data = (0, util$1.deepMerge)(value, data).map(function (v, i) {
        var label = v;

        if (formatterType === 'string') {
          label = formatter.replace('{value}', v);
        }

        if (formatterType === 'function') {
          label = formatter({
            value: v,
            index: i
          });
        }

        return label;
      });
      axisLabel.data = data;
    });
    return gauges;
  }

  function calcGaugesDetailsPosition(gauges, chart) {
    gauges.forEach(function (gaugeItem) {
      var data = gaugeItem.data,
          details = gaugeItem.details,
          center = gaugeItem.center;
      var position = details.position,
          offset = details.offset;
      var detailsPosition = data.map(function (_ref3) {
        var startAngle = _ref3.startAngle,
            endAngle = _ref3.endAngle,
            radius = _ref3.radius;
        var point = null;

        if (position === 'center') {
          point = center;
        } else if (position === 'start') {
          point = util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([radius, startAngle]));
        } else if (position === 'end') {
          point = util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([radius, endAngle]));
        }

        return getOffsetedPoint(point, offset);
      });
      gaugeItem.detailsPosition = detailsPosition;
    });
    return gauges;
  }

  function calcGaugesDetailsContent(gauges, chart) {
    gauges.forEach(function (gaugeItem) {
      var data = gaugeItem.data,
          details = gaugeItem.details;
      var formatter = details.formatter;
      var formatterType = (0, _typeof2["default"])(formatter);
      var contents = data.map(function (dataItem) {
        var content = dataItem.value;

        if (formatterType === 'string') {
          content = formatter.replace('{value}', '{nt}');
          content = content.replace('{name}', dataItem.name);
        }

        if (formatterType === 'function') content = formatter(dataItem);
        return content.toString();
      });
      gaugeItem.detailsContent = contents;
    });
    return gauges;
  }

  function getOffsetedPoint(_ref4, _ref5) {
    var _ref6 = (0, _slicedToArray2["default"])(_ref4, 2),
        x = _ref6[0],
        y = _ref6[1];

    var _ref7 = (0, _slicedToArray2["default"])(_ref5, 2),
        ox = _ref7[0],
        oy = _ref7[1];

    return [x + ox, y + oy];
  }

  function getAxisTickConfig(gaugeItem) {
    var tickPosition = gaugeItem.tickPosition,
        animationCurve = gaugeItem.animationCurve,
        animationFrame = gaugeItem.animationFrame,
        rLevel = gaugeItem.rLevel;
    return tickPosition.map(function (foo, i) {
      return {
        name: 'polyline',
        index: rLevel,
        visible: gaugeItem.axisTick.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getAxisTickShape(gaugeItem, i),
        style: getAxisTickStyle(gaugeItem)
      };
    });
  }

  function getAxisTickShape(gaugeItem, i) {
    var tickPosition = gaugeItem.tickPosition;
    return {
      points: tickPosition[i]
    };
  }

  function getAxisTickStyle(gaugeItem, i) {
    var style = gaugeItem.axisTick.style;
    return style;
  }

  function getAxisLabelConfig(gaugeItem) {
    var labelPosition = gaugeItem.labelPosition,
        animationCurve = gaugeItem.animationCurve,
        animationFrame = gaugeItem.animationFrame,
        rLevel = gaugeItem.rLevel;
    return labelPosition.map(function (foo, i) {
      return {
        name: 'text',
        index: rLevel,
        visible: gaugeItem.axisLabel.show,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getAxisLabelShape(gaugeItem, i),
        style: getAxisLabelStyle(gaugeItem, i)
      };
    });
  }

  function getAxisLabelShape(gaugeItem, i) {
    var labelPosition = gaugeItem.labelPosition,
        data = gaugeItem.axisLabel.data;
    return {
      content: data[i].toString(),
      position: labelPosition[i]
    };
  }

  function getAxisLabelStyle(gaugeItem, i) {
    var labelAlign = gaugeItem.labelAlign,
        axisLabel = gaugeItem.axisLabel;
    var style = axisLabel.style;
    return (0, util$1.deepMerge)(_objectSpread({}, labelAlign[i]), style);
  }

  function getBackgroundArcConfig(gaugeItem) {
    var animationCurve = gaugeItem.animationCurve,
        animationFrame = gaugeItem.animationFrame,
        rLevel = gaugeItem.rLevel;
    return [{
      name: 'arc',
      index: rLevel,
      visible: gaugeItem.backgroundArc.show,
      animationCurve: animationCurve,
      animationFrame: animationFrame,
      shape: getGaugeBackgroundArcShape(gaugeItem),
      style: getGaugeBackgroundArcStyle(gaugeItem)
    }];
  }

  function getGaugeBackgroundArcShape(gaugeItem) {
    var startAngle = gaugeItem.startAngle,
        endAngle = gaugeItem.endAngle,
        center = gaugeItem.center,
        radius = gaugeItem.radius;
    return {
      rx: center[0],
      ry: center[1],
      r: radius,
      startAngle: startAngle,
      endAngle: endAngle
    };
  }

  function getGaugeBackgroundArcStyle(gaugeItem) {
    var backgroundArc = gaugeItem.backgroundArc,
        arcLineWidth = gaugeItem.arcLineWidth;
    var style = backgroundArc.style;
    return (0, util$1.deepMerge)({
      lineWidth: arcLineWidth
    }, style);
  }

  function getStartBackgroundArcConfig(gaugeItem) {
    var config = getBackgroundArcConfig(gaugeItem)[0];

    var shape = _objectSpread({}, config.shape);

    shape.endAngle = config.shape.startAngle;
    config.shape = shape;
    return [config];
  }

  function getArcConfig(gaugeItem) {
    var data = gaugeItem.data,
        animationCurve = gaugeItem.animationCurve,
        animationFrame = gaugeItem.animationFrame,
        rLevel = gaugeItem.rLevel;
    return data.map(function (foo, i) {
      return {
        name: 'agArc',
        index: rLevel,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getGaugeArcShape(gaugeItem, i),
        style: getGaugeArcStyle(gaugeItem, i)
      };
    });
  }

  function getGaugeArcShape(gaugeItem, i) {
    var data = gaugeItem.data,
        center = gaugeItem.center,
        gradientEndAngle = gaugeItem.endAngle;
    var _data$i = data[i],
        radius = _data$i.radius,
        startAngle = _data$i.startAngle,
        endAngle = _data$i.endAngle,
        localGradient = _data$i.localGradient;
    if (localGradient) gradientEndAngle = endAngle;
    return {
      rx: center[0],
      ry: center[1],
      r: radius,
      startAngle: startAngle,
      endAngle: endAngle,
      gradientEndAngle: gradientEndAngle
    };
  }

  function getGaugeArcStyle(gaugeItem, i) {
    var data = gaugeItem.data,
        dataItemStyle = gaugeItem.dataItemStyle;
    var _data$i2 = data[i],
        lineWidth = _data$i2.lineWidth,
        gradient = _data$i2.gradient;
    gradient = gradient.map(function (c) {
      return (0, lib.getRgbaValue)(c);
    });
    return (0, util$1.deepMerge)({
      lineWidth: lineWidth,
      gradient: gradient
    }, dataItemStyle);
  }

  function getStartArcConfig(gaugeItem) {
    var configs = getArcConfig(gaugeItem);
    configs.map(function (config) {
      var shape = _objectSpread({}, config.shape);

      shape.endAngle = config.shape.startAngle;
      config.shape = shape;
    });
    return configs;
  }

  function beforeChangeArc(graph, config) {
    var graphGradient = graph.style.gradient;
    var cacheNum = graphGradient.length;
    var needNum = config.style.gradient.length;

    if (cacheNum > needNum) {
      graphGradient.splice(needNum);
    } else {
      var last = graphGradient.slice(-1)[0];
      graphGradient.push.apply(graphGradient, (0, _toConsumableArray2["default"])(new Array(needNum - cacheNum).fill(0).map(function (foo) {
        return (0, _toConsumableArray2["default"])(last);
      })));
    }
  }

  function getPointerConfig(gaugeItem) {
    var animationCurve = gaugeItem.animationCurve,
        animationFrame = gaugeItem.animationFrame,
        center = gaugeItem.center,
        rLevel = gaugeItem.rLevel;
    return [{
      name: 'polyline',
      index: rLevel,
      visible: gaugeItem.pointer.show,
      animationCurve: animationCurve,
      animationFrame: animationFrame,
      shape: getPointerShape(gaugeItem),
      style: getPointerStyle(gaugeItem),
      setGraphCenter: function setGraphCenter(foo, graph) {
        graph.style.graphCenter = center;
      }
    }];
  }

  function getPointerShape(gaugeItem) {
    var center = gaugeItem.center;
    return {
      points: getPointerPoints(center),
      close: true
    };
  }

  function getPointerStyle(gaugeItem) {
    var startAngle = gaugeItem.startAngle,
        endAngle = gaugeItem.endAngle,
        min = gaugeItem.min,
        max = gaugeItem.max,
        data = gaugeItem.data,
        pointer = gaugeItem.pointer,
        center = gaugeItem.center;
    var valueIndex = pointer.valueIndex,
        style = pointer.style;
    var value = data[valueIndex] ? data[valueIndex].value : 0;
    var angle = (value - min) / (max - min) * (endAngle - startAngle) + startAngle + Math.PI / 2;
    return (0, util$1.deepMerge)({
      rotate: (0, util$1.radianToAngle)(angle),
      scale: [1, 1],
      graphCenter: center
    }, style);
  }

  function getPointerPoints(_ref8) {
    var _ref9 = (0, _slicedToArray2["default"])(_ref8, 2),
        x = _ref9[0],
        y = _ref9[1];

    var point1 = [x, y - 40];
    var point2 = [x + 5, y];
    var point3 = [x, y + 10];
    var point4 = [x - 5, y];
    return [point1, point2, point3, point4];
  }

  function getStartPointerConfig(gaugeItem) {
    var startAngle = gaugeItem.startAngle;
    var config = getPointerConfig(gaugeItem)[0];
    config.style.rotate = (0, util$1.radianToAngle)(startAngle + Math.PI / 2);
    return [config];
  }

  function getDetailsConfig(gaugeItem) {
    var detailsPosition = gaugeItem.detailsPosition,
        animationCurve = gaugeItem.animationCurve,
        animationFrame = gaugeItem.animationFrame,
        rLevel = gaugeItem.rLevel;
    var visible = gaugeItem.details.show;
    return detailsPosition.map(function (foo, i) {
      return {
        name: 'numberText',
        index: rLevel,
        visible: visible,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getDetailsShape(gaugeItem, i),
        style: getDetailsStyle(gaugeItem, i)
      };
    });
  }

  function getDetailsShape(gaugeItem, i) {
    var detailsPosition = gaugeItem.detailsPosition,
        detailsContent = gaugeItem.detailsContent,
        data = gaugeItem.data,
        details = gaugeItem.details;
    var position = detailsPosition[i];
    var content = detailsContent[i];
    var dataValue = data[i].value;
    var toFixed = details.valueToFixed;
    return {
      number: [dataValue],
      content: content,
      position: position,
      toFixed: toFixed
    };
  }

  function getDetailsStyle(gaugeItem, i) {
    var details = gaugeItem.details,
        data = gaugeItem.data;
    var style = details.style;
    var color = data[i].color;
    return (0, util$1.deepMerge)({
      fill: color
    }, style);
  }
  });

  unwrapExports(gauge_1$1);
  var gauge_2 = gauge_1$1.gauge;

  var legend_1$1 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.legend = legend;

  var _defineProperty2 = interopRequireDefault(defineProperty);

  var _slicedToArray2 = interopRequireDefault(slicedToArray);

  var _typeof2 = interopRequireDefault(_typeof_1);









  function legend(chart) {
    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var legend = option.legend;

    if (legend) {
      legend = (0, util$1.deepMerge)((0, util.deepClone)(config.legendConfig, true), legend);
      legend = initLegendData(legend);
      legend = filterInvalidData(legend, option, chart);
      legend = calcLegendTextWidth(legend, chart);
      legend = calcLegendPosition(legend, chart);
      legend = [legend];
    } else {
      legend = [];
    }

    (0, updater_class.doUpdate)({
      chart: chart,
      series: legend,
      key: 'legendIcon',
      getGraphConfig: getIconConfig
    });
    (0, updater_class.doUpdate)({
      chart: chart,
      series: legend,
      key: 'legendText',
      getGraphConfig: getTextConfig
    });
  }

  function initLegendData(legend) {
    var data = legend.data;
    legend.data = data.map(function (item) {
      var itemType = (0, _typeof2["default"])(item);

      if (itemType === 'string') {
        return {
          name: item
        };
      } else if (itemType === 'object') {
        return item;
      }

      return {
        name: ''
      };
    });
    return legend;
  }

  function filterInvalidData(legend, option, chart) {
    var series = option.series;
    var legendStatus = chart.legendStatus;
    var data = legend.data.filter(function (item) {
      var name = item.name;
      var result = series.find(function (_ref) {
        var sn = _ref.name;
        return name === sn;
      });
      if (!result) return false;
      if (!item.color) item.color = result.color;
      if (!item.icon) item.icon = result.type;
      return item;
    });
    if (!legendStatus || legendStatus.length !== legend.data.length) legendStatus = new Array(legend.data.length).fill(true);
    data.forEach(function (item, i) {
      return item.status = legendStatus[i];
    });
    legend.data = data;
    chart.legendStatus = legendStatus;
    return legend;
  }

  function calcLegendTextWidth(legend, chart) {
    var ctx = chart.render.ctx;
    var data = legend.data,
        textStyle = legend.textStyle,
        textUnselectedStyle = legend.textUnselectedStyle;
    data.forEach(function (item) {
      var status = item.status,
          name = item.name;
      item.textWidth = getTextWidth(ctx, name, status ? textStyle : textUnselectedStyle);
    });
    return legend;
  }

  function getTextWidth(ctx, text, style) {
    ctx.font = getFontConfig(style);
    return ctx.measureText(text).width;
  }

  function getFontConfig(style) {
    var fontFamily = style.fontFamily,
        fontSize = style.fontSize;
    return "".concat(fontSize, "px ").concat(fontFamily);
  }

  function calcLegendPosition(legend, chart) {
    var orient = legend.orient;

    if (orient === 'vertical') {
      calcVerticalPosition(legend, chart);
    } else {
      calcHorizontalPosition(legend, chart);
    }

    return legend;
  }

  function calcHorizontalPosition(legend, chart) {
    var iconHeight = legend.iconHeight,
        itemGap = legend.itemGap;
    var lines = calcDefaultHorizontalPosition(legend, chart);
    var xOffsets = lines.map(function (line) {
      return getHorizontalXOffset(line, legend, chart);
    });
    var yOffset = getHorizontalYOffset(legend, chart);
    var align = {
      textAlign: 'left',
      textBaseline: 'middle'
    };
    lines.forEach(function (line, i) {
      return line.forEach(function (item) {
        var iconPosition = item.iconPosition,
            textPosition = item.textPosition;
        var xOffset = xOffsets[i];
        var realYOffset = yOffset + i * (itemGap + iconHeight);
        item.iconPosition = mergeOffset(iconPosition, [xOffset, realYOffset]);
        item.textPosition = mergeOffset(textPosition, [xOffset, realYOffset]);
        item.align = align;
      });
    });
  }

  function calcDefaultHorizontalPosition(legend, chart) {
    var data = legend.data,
        iconWidth = legend.iconWidth;
    var w = chart.render.area[0];
    var startIndex = 0;
    var lines = [[]];
    data.forEach(function (item, i) {
      var beforeWidth = getBeforeWidth(startIndex, i, legend);
      var endXPos = beforeWidth + iconWidth + 5 + item.textWidth;

      if (endXPos >= w) {
        startIndex = i;
        beforeWidth = getBeforeWidth(startIndex, i, legend);
        lines.push([]);
      }

      item.iconPosition = [beforeWidth, 0];
      item.textPosition = [beforeWidth + iconWidth + 5, 0];
      lines.slice(-1)[0].push(item);
    });
    return lines;
  }

  function getBeforeWidth(startIndex, currentIndex, legend) {
    var data = legend.data,
        iconWidth = legend.iconWidth,
        itemGap = legend.itemGap;
    var beforeItem = data.slice(startIndex, currentIndex);
    return (0, util$1.mulAdd)(beforeItem.map(function (_ref2) {
      var textWidth = _ref2.textWidth;
      return textWidth;
    })) + (currentIndex - startIndex) * (itemGap + 5 + iconWidth);
  }

  function getHorizontalXOffset(data, legend, chart) {
    var left = legend.left,
        right = legend.right,
        iconWidth = legend.iconWidth,
        itemGap = legend.itemGap;
    var w = chart.render.area[0];
    var dataNum = data.length;
    var allWidth = (0, util$1.mulAdd)(data.map(function (_ref3) {
      var textWidth = _ref3.textWidth;
      return textWidth;
    })) + dataNum * (5 + iconWidth) + (dataNum - 1) * itemGap;
    var horizontal = [left, right].findIndex(function (pos) {
      return pos !== 'auto';
    });

    if (horizontal === -1) {
      return (w - allWidth) / 2;
    } else if (horizontal === 0) {
      if (typeof left === 'number') return left;
      return parseInt(left) / 100 * w;
    } else {
      if (typeof right !== 'number') right = parseInt(right) / 100 * w;
      return w - (allWidth + right);
    }
  }

  function getHorizontalYOffset(legend, chart) {
    var top = legend.top,
        bottom = legend.bottom,
        iconHeight = legend.iconHeight;
    var h = chart.render.area[1];
    var vertical = [top, bottom].findIndex(function (pos) {
      return pos !== 'auto';
    });
    var halfIconHeight = iconHeight / 2;

    if (vertical === -1) {
      var _chart$gridArea = chart.gridArea,
          y = _chart$gridArea.y,
          height = _chart$gridArea.h;
      return y + height + 45 - halfIconHeight;
    } else if (vertical === 0) {
      if (typeof top === 'number') return top - halfIconHeight;
      return parseInt(top) / 100 * h - halfIconHeight;
    } else {
      if (typeof bottom !== 'number') bottom = parseInt(bottom) / 100 * h;
      return h - bottom - halfIconHeight;
    }
  }

  function mergeOffset(_ref4, _ref5) {
    var _ref6 = (0, _slicedToArray2["default"])(_ref4, 2),
        x = _ref6[0],
        y = _ref6[1];

    var _ref7 = (0, _slicedToArray2["default"])(_ref5, 2),
        ox = _ref7[0],
        oy = _ref7[1];

    return [x + ox, y + oy];
  }

  function calcVerticalPosition(legend, chart) {
    var _getVerticalXOffset = getVerticalXOffset(legend, chart),
        _getVerticalXOffset2 = (0, _slicedToArray2["default"])(_getVerticalXOffset, 2),
        isRight = _getVerticalXOffset2[0],
        xOffset = _getVerticalXOffset2[1];

    var yOffset = getVerticalYOffset(legend, chart);
    calcDefaultVerticalPosition(legend, isRight);
    var align = {
      textAlign: 'left',
      textBaseline: 'middle'
    };
    legend.data.forEach(function (item) {
      var textPosition = item.textPosition,
          iconPosition = item.iconPosition;
      item.textPosition = mergeOffset(textPosition, [xOffset, yOffset]);
      item.iconPosition = mergeOffset(iconPosition, [xOffset, yOffset]);
      item.align = align;
    });
  }

  function getVerticalXOffset(legend, chart) {
    var left = legend.left,
        right = legend.right;
    var w = chart.render.area[0];
    var horizontal = [left, right].findIndex(function (pos) {
      return pos !== 'auto';
    });

    if (horizontal === -1) {
      return [true, w - 10];
    } else {
      var offset = [left, right][horizontal];
      if (typeof offset !== 'number') offset = parseInt(offset) / 100 * w;
      return [Boolean(horizontal), offset];
    }
  }

  function getVerticalYOffset(legend, chart) {
    var iconHeight = legend.iconHeight,
        itemGap = legend.itemGap,
        data = legend.data,
        top = legend.top,
        bottom = legend.bottom;
    var h = chart.render.area[1];
    var dataNum = data.length;
    var allHeight = dataNum * iconHeight + (dataNum - 1) * itemGap;
    var vertical = [top, bottom].findIndex(function (pos) {
      return pos !== 'auto';
    });

    if (vertical === -1) {
      return (h - allHeight) / 2;
    } else {
      var offset = [top, bottom][vertical];
      if (typeof offset !== 'number') offset = parseInt(offset) / 100 * h;
      if (vertical === 1) offset = h - offset - allHeight;
      return offset;
    }
  }

  function calcDefaultVerticalPosition(legend, isRight) {
    var data = legend.data,
        iconWidth = legend.iconWidth,
        iconHeight = legend.iconHeight,
        itemGap = legend.itemGap;
    var halfIconHeight = iconHeight / 2;
    data.forEach(function (item, i) {
      var textWidth = item.textWidth;
      var yPos = (iconHeight + itemGap) * i + halfIconHeight;
      var iconXPos = isRight ? 0 - iconWidth : 0;
      var textXpos = isRight ? iconXPos - 5 - textWidth : iconWidth + 5;
      item.iconPosition = [iconXPos, yPos];
      item.textPosition = [textXpos, yPos];
    });
  }

  function getIconConfig(legendItem, updater) {
    var data = legendItem.data,
        selectAble = legendItem.selectAble,
        animationCurve = legendItem.animationCurve,
        animationFrame = legendItem.animationFrame,
        rLevel = legendItem.rLevel;
    return data.map(function (item, i) {
      return (0, _defineProperty2["default"])({
        name: item.icon === 'line' ? 'lineIcon' : 'rect',
        index: rLevel,
        visible: legendItem.show,
        hover: selectAble,
        click: selectAble,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        shape: getIconShape(legendItem, i),
        style: getIconStyle(legendItem, i)
      }, "click", createClickCallBack(legendItem, i, updater));
    });
  }

  function getIconShape(legendItem, i) {
    var data = legendItem.data,
        iconWidth = legendItem.iconWidth,
        iconHeight = legendItem.iconHeight;

    var _data$i$iconPosition = (0, _slicedToArray2["default"])(data[i].iconPosition, 2),
        x = _data$i$iconPosition[0],
        y = _data$i$iconPosition[1];

    var halfIconHeight = iconHeight / 2;
    return {
      x: x,
      y: y - halfIconHeight,
      w: iconWidth,
      h: iconHeight
    };
  }

  function getIconStyle(legendItem, i) {
    var data = legendItem.data,
        iconStyle = legendItem.iconStyle,
        iconUnselectedStyle = legendItem.iconUnselectedStyle;
    var _data$i = data[i],
        status = _data$i.status,
        color = _data$i.color;
    var style = status ? iconStyle : iconUnselectedStyle;
    return (0, util$1.deepMerge)({
      fill: color
    }, style);
  }

  function getTextConfig(legendItem, updater) {
    var data = legendItem.data,
        selectAble = legendItem.selectAble,
        animationCurve = legendItem.animationCurve,
        animationFrame = legendItem.animationFrame,
        rLevel = legendItem.rLevel;
    return data.map(function (foo, i) {
      return {
        name: 'text',
        index: rLevel,
        visible: legendItem.show,
        hover: selectAble,
        animationCurve: animationCurve,
        animationFrame: animationFrame,
        hoverRect: getTextHoverRect(legendItem, i),
        shape: getTextShape(legendItem, i),
        style: getTextStyle(legendItem, i),
        click: createClickCallBack(legendItem, i, updater)
      };
    });
  }

  function getTextShape(legendItem, i) {
    var _legendItem$data$i = legendItem.data[i],
        textPosition = _legendItem$data$i.textPosition,
        name = _legendItem$data$i.name;
    return {
      content: name,
      position: textPosition
    };
  }

  function getTextStyle(legendItem, i) {
    var textStyle = legendItem.textStyle,
        textUnselectedStyle = legendItem.textUnselectedStyle;
    var _legendItem$data$i2 = legendItem.data[i],
        status = _legendItem$data$i2.status,
        align = _legendItem$data$i2.align;
    var style = status ? textStyle : textUnselectedStyle;
    return (0, util$1.deepMerge)((0, util.deepClone)(style, true), align);
  }

  function getTextHoverRect(legendItem, i) {
    var textStyle = legendItem.textStyle,
        textUnselectedStyle = legendItem.textUnselectedStyle;

    var _legendItem$data$i3 = legendItem.data[i],
        status = _legendItem$data$i3.status,
        _legendItem$data$i3$t = (0, _slicedToArray2["default"])(_legendItem$data$i3.textPosition, 2),
        x = _legendItem$data$i3$t[0],
        y = _legendItem$data$i3$t[1],
        textWidth = _legendItem$data$i3.textWidth;

    var style = status ? textStyle : textUnselectedStyle;
    var fontSize = style.fontSize;
    return [x, y - fontSize / 2, textWidth, fontSize];
  }

  function createClickCallBack(legendItem, index, updater) {
    var name = legendItem.data[index].name;
    return function () {
      var _updater$chart = updater.chart,
          legendStatus = _updater$chart.legendStatus,
          option = _updater$chart.option;
      var status = !legendStatus[index];
      var change = option.series.find(function (_ref9) {
        var sn = _ref9.name;
        return sn === name;
      });
      change.show = status;
      legendStatus[index] = status;
      updater.chart.setOption(option);
    };
  }
  });

  unwrapExports(legend_1$1);
  var legend_2 = legend_1$1.legend;

  var core = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  Object.defineProperty(exports, "mergeColor", {
    enumerable: true,
    get: function get() {
      return mergeColor_1.mergeColor;
    }
  });
  Object.defineProperty(exports, "title", {
    enumerable: true,
    get: function get() {
      return title_1$1.title;
    }
  });
  Object.defineProperty(exports, "grid", {
    enumerable: true,
    get: function get() {
      return grid_1$1.grid;
    }
  });
  Object.defineProperty(exports, "axis", {
    enumerable: true,
    get: function get() {
      return axis_1$1.axis;
    }
  });
  Object.defineProperty(exports, "line", {
    enumerable: true,
    get: function get() {
      return line_1$1.line;
    }
  });
  Object.defineProperty(exports, "bar", {
    enumerable: true,
    get: function get() {
      return bar_1$1.bar;
    }
  });
  Object.defineProperty(exports, "pie", {
    enumerable: true,
    get: function get() {
      return pie_1$1.pie;
    }
  });
  Object.defineProperty(exports, "radarAxis", {
    enumerable: true,
    get: function get() {
      return radarAxis_1$1.radarAxis;
    }
  });
  Object.defineProperty(exports, "radar", {
    enumerable: true,
    get: function get() {
      return radar_1$1.radar;
    }
  });
  Object.defineProperty(exports, "gauge", {
    enumerable: true,
    get: function get() {
      return gauge_1$1.gauge;
    }
  });
  Object.defineProperty(exports, "legend", {
    enumerable: true,
    get: function get() {
      return legend_1$1.legend;
    }
  });
  });

  unwrapExports(core);

  var charts_class = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports["default"] = void 0;

  var _typeof2 = interopRequireDefault(_typeof_1);

  var _classCallCheck2 = interopRequireDefault(classCallCheck);



  var _cRender = interopRequireDefault(lib$3);





  var Charts = function Charts(dom) {
    (0, _classCallCheck2["default"])(this, Charts);

    if (!dom) {
      console.error('Charts Missing parameters!');
      return false;
    }

    var clientWidth = dom.clientWidth,
        clientHeight = dom.clientHeight;
    var canvas = document.createElement('canvas');
    canvas.setAttribute('width', clientWidth);
    canvas.setAttribute('height', clientHeight);
    dom.appendChild(canvas);
    var attribute = {
      container: dom,
      canvas: canvas,
      render: new _cRender["default"](canvas),
      option: null
    };
    Object.assign(this, attribute);
  };
  /**
   * @description Set chart option
   * @param {Object} option Chart option
   * @param {Boolean} animationEnd Execute animationEnd
   * @return {Undefined} No return
   */


  exports["default"] = Charts;

  Charts.prototype.setOption = function (option) {
    var animationEnd = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

    if (!option || (0, _typeof2["default"])(option) !== 'object') {
      console.error('setOption Missing parameters!');
      return false;
    }

    if (animationEnd) this.render.graphs.forEach(function (graph) {
      return graph.animationEnd();
    });
    var optionCloned = (0, util.deepClone)(option, true);
    (0, core.mergeColor)(this, optionCloned);
    (0, core.grid)(this, optionCloned);
    (0, core.axis)(this, optionCloned);
    (0, core.radarAxis)(this, optionCloned);
    (0, core.title)(this, optionCloned);
    (0, core.bar)(this, optionCloned);
    (0, core.line)(this, optionCloned);
    (0, core.pie)(this, optionCloned);
    (0, core.radar)(this, optionCloned);
    (0, core.gauge)(this, optionCloned);
    (0, core.legend)(this, optionCloned);
    this.option = option;
    this.render.launchAnimation(); // console.warn(this)
  };
  /**
   * @description Resize chart
   * @return {Undefined} No return
   */


  Charts.prototype.resize = function () {
    var container = this.container,
        canvas = this.canvas,
        render = this.render,
        option = this.option;
    var clientWidth = container.clientWidth,
        clientHeight = container.clientHeight;
    canvas.setAttribute('width', clientWidth);
    canvas.setAttribute('height', clientHeight);
    render.area = [clientWidth, clientHeight];
    this.setOption(option);
  };
  });

  unwrapExports(charts_class);

  var lib$4 = createCommonjsModule(function (module, exports) {



  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  Object.defineProperty(exports, "changeDefaultConfig", {
    enumerable: true,
    get: function get() {
      return config.changeDefaultConfig;
    }
  });
  exports["default"] = void 0;

  var _charts = interopRequireDefault(charts_class);



  var _default = _charts["default"];
  exports["default"] = _default;
  });

  var Charts = unwrapExports(lib$4);

  //
  var script$r = {
    name: 'DvCharts',
    mixins: [autoResize],
    props: {
      option: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      const id = uuid();
      return {
        ref: `charts-container-${id}`,
        chartRef: `chart-${id}`,
        chart: null
      };
    },

    watch: {
      option() {
        let {
          chart,
          option
        } = this;
        if (!chart) return;
        if (!option) option = {};
        chart.setOption(option, true);
      }

    },
    methods: {
      afterAutoResizeMixinInit() {
        const {
          initChart
        } = this;
        initChart();
      },

      initChart() {
        const {
          $refs,
          chartRef,
          option
        } = this;
        const chart = this.chart = new Charts($refs[chartRef]);
        if (!option) return;
        chart.setOption(option);
      },

      onResize() {
        const {
          chart
        } = this;
        if (!chart) return;
        chart.resize();
      }

    }
  };

  /* script */
  const __vue_script__$r = script$r;

  /* template */
  var __vue_render__$r = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-charts-container" }, [
      _c("div", { ref: _vm.chartRef, staticClass: "charts-canvas-container" })
    ])
  };
  var __vue_staticRenderFns__$r = [];
  __vue_render__$r._withStripped = true;

    /* style */
    const __vue_inject_styles__$r = function (inject) {
      if (!inject) return
      inject("data-v-1f446fe6_0", { source: ".dv-charts-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-charts-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$r = undefined;
    /* module identifier */
    const __vue_module_identifier__$r = undefined;
    /* functional template */
    const __vue_is_functional_template__$r = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$r = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$r, staticRenderFns: __vue_staticRenderFns__$r },
      __vue_inject_styles__$r,
      __vue_script__$r,
      __vue_scope_id__$r,
      __vue_is_functional_template__$r,
      __vue_module_identifier__$r,
      false,
      createInjector,
      undefined,
      undefined
    );

  function charts (Vue) {
    Vue.component(__vue_component__$r.name, __vue_component__$r);
  }

  //
  var script$s = {
    name: 'DvDigitalFlop',
    props: {
      config: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      return {
        renderer: null,
        defaultConfig: {
          /**
           * @description Number for digital flop
           * @type {Array<Number>}
           * @default number = []
           * @example number = [10]
           */
          number: [],

          /**
           * @description Content formatter
           * @type {String}
           * @default content = ''
           * @example content = '{nt}个'
           */
          content: '',

          /**
           * @description Number toFixed
           * @type {Number}
           * @default toFixed = 0
           */
          toFixed: 0,

          /**
           * @description Text align
           * @type {String}
           * @default textAlign = 'center'
           * @example textAlign = 'center' | 'left' | 'right'
           */
          textAlign: 'center',

          /**
           * @description rowGap
           * @type {Number}
           @default rowGap = 0
           */
          rowGap: 0,

          /**
           * @description Text style configuration
           * @type {Object} {CRender Class Style}
           */
          style: {
            fontSize: 30,
            fill: '#3de7c9'
          },

          /**
           * @description Number formatter
           * @type {Null|Function}
           */
          formatter: undefined,

          /**
           * @description CRender animationCurve
           * @type {String}
           * @default animationCurve = 'easeOutCubic'
           */
          animationCurve: 'easeOutCubic',

          /**
           * @description CRender animationFrame
           * @type {String}
           * @default animationFrame = 50
           */
          animationFrame: 50
        },
        mergedConfig: null,
        graph: null
      };
    },

    watch: {
      config() {
        const {
          update
        } = this;
        update();
      }

    },
    methods: {
      init() {
        const {
          initRender,
          mergeConfig,
          initGraph
        } = this;
        initRender();
        mergeConfig();
        initGraph();
      },

      initRender() {
        const {
          $refs
        } = this;
        this.renderer = new CRender($refs['digital-flop']);
      },

      mergeConfig() {
        const {
          defaultConfig,
          config
        } = this;
        this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
      },

      initGraph() {
        const {
          getShape,
          getStyle,
          renderer,
          mergedConfig
        } = this;
        const {
          animationCurve,
          animationFrame
        } = mergedConfig;
        const shape = getShape();
        const style = getStyle();
        this.graph = renderer.add({
          name: 'numberText',
          animationCurve,
          animationFrame,
          shape,
          style
        });
      },

      getShape() {
        const {
          number,
          content,
          toFixed,
          textAlign,
          rowGap,
          formatter
        } = this.mergedConfig;
        const [w, h] = this.renderer.area;
        const position = [w / 2, h / 2];
        if (textAlign === 'left') position[0] = 0;
        if (textAlign === 'right') position[0] = w;
        return {
          number,
          content,
          toFixed,
          position,
          rowGap,
          formatter
        };
      },

      getStyle() {
        const {
          style,
          textAlign
        } = this.mergedConfig;
        return util_2$1(style, {
          textAlign,
          textBaseline: 'middle'
        });
      },

      update() {
        const {
          mergeConfig,
          mergeShape,
          getShape,
          getStyle,
          graph,
          mergedConfig
        } = this;
        graph.animationEnd();
        mergeConfig();
        if (!graph) return;
        const {
          animationCurve,
          animationFrame
        } = mergedConfig;
        const shape = getShape();
        const style = getStyle();
        mergeShape(graph, shape);
        graph.animationCurve = animationCurve;
        graph.animationFrame = animationFrame;
        graph.animation('style', style, true);
        graph.animation('shape', shape);
      },

      mergeShape(graph, shape) {
        const cacheNum = graph.shape.number.length;
        const shapeNum = shape.number.length;
        if (cacheNum !== shapeNum) graph.shape.number = shape.number;
      }

    },

    mounted() {
      const {
        init
      } = this;
      init();
    }

  };

  /* script */
  const __vue_script__$s = script$s;

  /* template */
  var __vue_render__$s = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { staticClass: "dv-digital-flop" }, [
      _c("canvas", { ref: "digital-flop" })
    ])
  };
  var __vue_staticRenderFns__$s = [];
  __vue_render__$s._withStripped = true;

    /* style */
    const __vue_inject_styles__$s = function (inject) {
      if (!inject) return
      inject("data-v-113591fb_0", { source: ".dv-digital-flop canvas {\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-digital-flop canvas {\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$s = undefined;
    /* module identifier */
    const __vue_module_identifier__$s = undefined;
    /* functional template */
    const __vue_is_functional_template__$s = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$s = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$s, staticRenderFns: __vue_staticRenderFns__$s },
      __vue_inject_styles__$s,
      __vue_script__$s,
      __vue_scope_id__$s,
      __vue_is_functional_template__$s,
      __vue_module_identifier__$s,
      false,
      createInjector,
      undefined,
      undefined
    );

  //
  var script$t = {
    name: 'DvActiveRingChart',
    components: {
      dvDigitalFlop: __vue_component__$s
    },
    props: {
      config: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      return {
        defaultConfig: {
          /**
           * @description Ring radius
           * @type {String|Number}
           * @default radius = '50%'
           * @example radius = '50%' | 100
           */
          radius: '50%',

          /**
           * @description Active ring radius
           * @type {String|Number}
           * @default activeRadius = '55%'
           * @example activeRadius = '55%' | 110
           */
          activeRadius: '55%',

          /**
           * @description Ring data
           * @type {Array<Object>}
           * @default data = [{ name: '', value: 0 }]
           */
          data: [{
            name: '',
            value: 0
          }],

          /**
           * @description Ring line width
           * @type {Number}
           * @default lineWidth = 20
           */
          lineWidth: 20,

          /**
           * @description Active time gap (ms)
           * @type {Number}
           * @default activeTimeGap = 3000
           */
          activeTimeGap: 3000,

          /**
           * @description Ring color (hex|rgb|rgba|color keywords)
           * @type {Array<String>}
           * @default color = [Charts Default Color]
           * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
           */
          color: [],

          /**
           * @description Digital flop style
           * @type {Object}
           */
          digitalFlopStyle: {
            fontSize: 25,
            fill: '#fff'
          },

          /**
           * @description Digital flop toFixed
           * @type {Number}
           */
          digitalFlopToFixed: 0,

          /**
           * @description Digital flop unit
           * @type {String}
           */
          digitalFlopUnit: '',

          /**
           * @description CRender animationCurve
           * @type {String}
           * @default animationCurve = 'easeOutCubic'
           */
          animationCurve: 'easeOutCubic',

          /**
           * @description CRender animationFrame
           * @type {String}
           * @default animationFrame = 50
           */
          animationFrame: 50,

          /**
           * @description showOriginValue
           * @type {Boolean}
           * @default showOriginValue = false
           */
          showOriginValue: false
        },
        mergedConfig: null,
        chart: null,
        activeIndex: 0,
        animationHandler: ''
      };
    },

    computed: {
      digitalFlop() {
        const {
          mergedConfig,
          activeIndex
        } = this;
        if (!mergedConfig) return {};
        const {
          digitalFlopStyle,
          digitalFlopToFixed,
          data,
          showOriginValue,
          digitalFlopUnit
        } = mergedConfig;
        const value = data.map(({
          value
        }) => value);
        let displayValue;

        if (showOriginValue) {
          displayValue = value[activeIndex];
        } else {
          const sum = value.reduce((all, v) => all + v, 0);
          const percent = parseFloat(value[activeIndex] / sum * 100) || 0;
          displayValue = percent;
        }

        return {
          content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
          number: [displayValue],
          style: digitalFlopStyle,
          toFixed: digitalFlopToFixed
        };
      },

      ringName() {
        const {
          mergedConfig,
          activeIndex
        } = this;
        if (!mergedConfig) return '';
        return mergedConfig.data[activeIndex].name;
      },

      fontSize() {
        const {
          mergedConfig
        } = this;
        if (!mergedConfig) return '';
        return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`;
      }

    },
    watch: {
      config() {
        const {
          animationHandler,
          mergeConfig,
          setRingOption
        } = this;
        clearTimeout(animationHandler);
        this.activeIndex = 0;
        mergeConfig();
        setRingOption();
      }

    },
    methods: {
      init() {
        const {
          initChart,
          mergeConfig,
          setRingOption
        } = this;
        initChart();
        mergeConfig();
        setRingOption();
      },

      initChart() {
        const {
          $refs
        } = this;
        this.chart = new Charts($refs['active-ring-chart']);
      },

      mergeConfig() {
        const {
          defaultConfig,
          config
        } = this;
        this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
      },

      setRingOption() {
        const {
          getRingOption,
          chart,
          ringAnimation
        } = this;
        const option = getRingOption();
        chart.setOption(option, true);
        ringAnimation();
      },

      getRingOption() {
        const {
          mergedConfig,
          getRealRadius
        } = this;
        const radius = getRealRadius();
        mergedConfig.data.forEach(dataItem => {
          dataItem.radius = radius;
        });
        return {
          series: [{
            type: 'pie',
            ...mergedConfig,
            outsideLabel: {
              show: false
            }
          }],
          color: mergedConfig.color
        };
      },

      getRealRadius(active = false) {
        const {
          mergedConfig,
          chart
        } = this;
        const {
          radius,
          activeRadius,
          lineWidth
        } = mergedConfig;
        const maxRadius = Math.min(...chart.render.area) / 2;
        const halfLineWidth = lineWidth / 2;
        let realRadius = active ? activeRadius : radius;
        if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius;
        const insideRadius = realRadius - halfLineWidth;
        const outSideRadius = realRadius + halfLineWidth;
        return [insideRadius, outSideRadius];
      },

      ringAnimation() {
        let {
          activeIndex,
          getRingOption,
          chart,
          getRealRadius
        } = this;
        const radius = getRealRadius();
        const active = getRealRadius(true);
        const option = getRingOption();
        const {
          data
        } = option.series[0];
        data.forEach((dataItem, i) => {
          if (i === activeIndex) {
            dataItem.radius = active;
          } else {
            dataItem.radius = radius;
          }
        });
        chart.setOption(option, true);
        const {
          activeTimeGap
        } = option.series[0];
        this.animationHandler = setTimeout(foo => {
          activeIndex += 1;
          if (activeIndex >= data.length) activeIndex = 0;
          this.activeIndex = activeIndex;
          this.ringAnimation();
        }, activeTimeGap);
      }

    },

    mounted() {
      const {
        init
      } = this;
      init();
    },

    beforeDestroy() {
      const {
        animationHandler
      } = this;
      clearTimeout(animationHandler);
    }

  };

  /* script */
  const __vue_script__$t = script$t;

  /* template */
  var __vue_render__$t = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { staticClass: "dv-active-ring-chart" }, [
      _c("div", {
        ref: "active-ring-chart",
        staticClass: "active-ring-chart-container"
      }),
      _vm._v(" "),
      _c(
        "div",
        { staticClass: "active-ring-info" },
        [
          _c("dv-digital-flop", { attrs: { config: _vm.digitalFlop } }),
          _vm._v(" "),
          _c("div", { staticClass: "active-ring-name", style: _vm.fontSize }, [
            _vm._v(_vm._s(_vm.ringName))
          ])
        ],
        1
      )
    ])
  };
  var __vue_staticRenderFns__$t = [];
  __vue_render__$t._withStripped = true;

    /* style */
    const __vue_inject_styles__$t = function (inject) {
      if (!inject) return
      inject("data-v-ca8abc0a_0", { source: ".dv-active-ring-chart {\n  position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n  width: 100%;\n  height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n  width: 100px;\n  height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n  width: 100px;\n  height: 30px;\n  color: #fff;\n  text-align: center;\n  vertical-align: middle;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,mBAAmB;AACrB;AACA;EACE,YAAY;EACZ,YAAY;AACd;AACA;EACE,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,kBAAkB;EAClB,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;EAChB,mBAAmB;AACrB","file":"main.vue","sourcesContent":[".dv-active-ring-chart {\n  position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n  width: 100%;\n  height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n  width: 100px;\n  height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n  width: 100px;\n  height: 30px;\n  color: #fff;\n  text-align: center;\n  vertical-align: middle;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$t = undefined;
    /* module identifier */
    const __vue_module_identifier__$t = undefined;
    /* functional template */
    const __vue_is_functional_template__$t = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$t = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$t, staticRenderFns: __vue_staticRenderFns__$t },
      __vue_inject_styles__$t,
      __vue_script__$t,
      __vue_scope_id__$t,
      __vue_is_functional_template__$t,
      __vue_module_identifier__$t,
      false,
      createInjector,
      undefined,
      undefined
    );

  function activeRingChart (Vue) {
    Vue.component(__vue_component__$t.name, __vue_component__$t);
  }

  //
  var script$u = {
    name: 'DvCapsuleChart',
    props: {
      config: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      return {
        defaultConfig: {
          /**
           * @description Capsule chart data
           * @type {Array<Object>}
           * @default data = []
           * @example data = [{ name: 'foo1', value: 100 }, { name: 'foo2', value: 100 }]
           */
          data: [],

          /**
           * @description Colors (hex|rgb|rgba|color keywords)
           * @type {Array<String>}
           * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
           * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
           */
          colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],

          /**
           * @description Chart unit
           * @type {String}
           * @default unit = ''
           */
          unit: '',

          /**
           * @description Show item value
           * @type {Boolean}
           * @default showValue = false
           */
          showValue: false
        },
        mergedConfig: null,
        capsuleLength: [],
        capsuleValue: [],
        labelData: [],
        labelDataLength: []
      };
    },

    watch: {
      config() {
        const {
          calcData
        } = this;
        calcData();
      }

    },
    methods: {
      calcData() {
        const {
          mergeConfig,
          calcCapsuleLengthAndLabelData
        } = this;
        mergeConfig();
        calcCapsuleLengthAndLabelData();
      },

      mergeConfig() {
        let {
          config,
          defaultConfig
        } = this;
        this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
      },

      calcCapsuleLengthAndLabelData() {
        const {
          data
        } = this.mergedConfig;
        if (!data.length) return;
        const capsuleValue = data.map(({
          value
        }) => value);
        const maxValue = Math.max(...capsuleValue);
        this.capsuleValue = capsuleValue;
        this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0);
        const oneFifth = maxValue / 5;
        const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))));
        this.labelData = labelData;
        this.labelDataLength = Array.from(labelData).map(v => maxValue ? v / maxValue : 0);
      }

    },

    mounted() {
      const {
        calcData
      } = this;
      calcData();
    }

  };

  /* script */
  const __vue_script__$u = script$u;

  /* template */
  var __vue_render__$u = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c(
      "div",
      { staticClass: "dv-capsule-chart" },
      [
        _vm.mergedConfig
          ? [
              _c(
                "div",
                { staticClass: "label-column" },
                [
                  _vm._l(_vm.mergedConfig.data, function(item) {
                    return _c("div", { key: item.name }, [
                      _vm._v(_vm._s(item.name))
                    ])
                  }),
                  _vm._v(" "),
                  _c("div", [_vm._v(" ")])
                ],
                2
              ),
              _vm._v(" "),
              _c(
                "div",
                { staticClass: "capsule-container" },
                [
                  _vm._l(_vm.capsuleLength, function(capsule, index) {
                    return _c(
                      "div",
                      { key: index, staticClass: "capsule-item" },
                      [
                        _c(
                          "div",
                          {
                            staticClass: "capsule-item-column",
                            style:
                              "width: " +
                              capsule * 100 +
                              "%; background-color: " +
                              _vm.mergedConfig.colors[
                                index % _vm.mergedConfig.colors.length
                              ] +
                              ";"
                          },
                          [
                            _vm.mergedConfig.showValue
                              ? _c("div", { staticClass: "capsule-item-value" }, [
                                  _vm._v(_vm._s(_vm.capsuleValue[index]))
                                ])
                              : _vm._e()
                          ]
                        )
                      ]
                    )
                  }),
                  _vm._v(" "),
                  _c(
                    "div",
                    { staticClass: "unit-label" },
                    _vm._l(_vm.labelData, function(label, index) {
                      return _c("div", { key: label + index }, [
                        _vm._v(_vm._s(label))
                      ])
                    }),
                    0
                  )
                ],
                2
              ),
              _vm._v(" "),
              _vm.mergedConfig.unit
                ? _c("div", { staticClass: "unit-text" }, [
                    _vm._v(_vm._s(_vm.mergedConfig.unit))
                  ])
                : _vm._e()
            ]
          : _vm._e()
      ],
      2
    )
  };
  var __vue_staticRenderFns__$u = [];
  __vue_render__$u._withStripped = true;

    /* style */
    const __vue_inject_styles__$u = function (inject) {
      if (!inject) return
      inject("data-v-6f678c1a_0", { source: ".dv-capsule-chart {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 10px;\n  color: #fff;\n}\n.dv-capsule-chart .label-column {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  box-sizing: border-box;\n  padding-right: 10px;\n  text-align: right;\n  font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n  height: 20px;\n  line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n  box-shadow: 0 0 3px #999;\n  height: 10px;\n  margin: 5px 0px;\n  border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column {\n  position: relative;\n  height: 8px;\n  margin-top: 1px;\n  border-radius: 5px;\n  transition: all 0.3s;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {\n  font-size: 12px;\n  transform: translateX(100%);\n}\n.dv-capsule-chart .unit-label {\n  height: 20px;\n  font-size: 12px;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.dv-capsule-chart .unit-text {\n  text-align: right;\n  display: flex;\n  align-items: flex-end;\n  font-size: 12px;\n  line-height: 20px;\n  margin-left: 10px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,mBAAmB;EACnB,sBAAsB;EACtB,aAAa;EACb,WAAW;AACb;AACA;EACE,aAAa;EACb,sBAAsB;EACtB,8BAA8B;EAC9B,sBAAsB;EACtB,mBAAmB;EACnB,iBAAiB;EACjB,eAAe;AACjB;AACA;EACE,YAAY;EACZ,iBAAiB;AACnB;AACA;EACE,OAAO;EACP,aAAa;EACb,sBAAsB;EACtB,8BAA8B;AAChC;AACA;EACE,wBAAwB;EACxB,YAAY;EACZ,eAAe;EACf,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,eAAe;EACf,kBAAkB;EAClB,oBAAoB;EACpB,aAAa;EACb,yBAAyB;EACzB,mBAAmB;AACrB;AACA;EACE,eAAe;EACf,2BAA2B;AAC7B;AACA;EACE,YAAY;EACZ,eAAe;EACf,kBAAkB;EAClB,aAAa;EACb,8BAA8B;EAC9B,mBAAmB;AACrB;AACA;EACE,iBAAiB;EACjB,aAAa;EACb,qBAAqB;EACrB,eAAe;EACf,iBAAiB;EACjB,iBAAiB;AACnB","file":"main.vue","sourcesContent":[".dv-capsule-chart {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 10px;\n  color: #fff;\n}\n.dv-capsule-chart .label-column {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  box-sizing: border-box;\n  padding-right: 10px;\n  text-align: right;\n  font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n  height: 20px;\n  line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n  box-shadow: 0 0 3px #999;\n  height: 10px;\n  margin: 5px 0px;\n  border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column {\n  position: relative;\n  height: 8px;\n  margin-top: 1px;\n  border-radius: 5px;\n  transition: all 0.3s;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {\n  font-size: 12px;\n  transform: translateX(100%);\n}\n.dv-capsule-chart .unit-label {\n  height: 20px;\n  font-size: 12px;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.dv-capsule-chart .unit-text {\n  text-align: right;\n  display: flex;\n  align-items: flex-end;\n  font-size: 12px;\n  line-height: 20px;\n  margin-left: 10px;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$u = undefined;
    /* module identifier */
    const __vue_module_identifier__$u = undefined;
    /* functional template */
    const __vue_is_functional_template__$u = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$u = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$u, staticRenderFns: __vue_staticRenderFns__$u },
      __vue_inject_styles__$u,
      __vue_script__$u,
      __vue_scope_id__$u,
      __vue_is_functional_template__$u,
      __vue_module_identifier__$u,
      false,
      createInjector,
      undefined,
      undefined
    );

  function capsuleChart (Vue) {
    Vue.component(__vue_component__$u.name, __vue_component__$u);
  }

  //
  var script$v = {
    name: 'DvWaterLevelPond',
    props: {
      config: Object,
      default: () => ({})
    },

    data() {
      const id = uuid();
      return {
        gradientId: `water-level-pond-${id}`,
        defaultConfig: {
          /**
           * @description Data
           * @type {Array<Number>}
           * @default data = []
           * @example data = [60, 40]
           */
          data: [],

          /**
           * @description Shape of wanter level pond
           * @type {String}
           * @default shape = 'rect'
           * @example shape = 'rect' | 'roundRect' | 'round'
           */
          shape: 'rect',

          /**
           * @description Water wave number
           * @type {Number}
           * @default waveNum = 3
           */
          waveNum: 3,

          /**
           * @description Water wave height (px)
           * @type {Number}
           * @default waveHeight = 40
           */
          waveHeight: 40,

          /**
           * @description Wave opacity
           * @type {Number}
           * @default waveOpacity = 0.4
           */
          waveOpacity: 0.4,

          /**
           * @description Colors (hex|rgb|rgba|color keywords)
           * @type {Array<String>}
           * @default colors = ['#00BAFF', '#3DE7C9']
           * @example colors = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
           */
          colors: ['#3DE7C9', '#00BAFF'],

          /**
           * @description Formatter
           * @type {String}
           * @default formatter = '{value}%'
           */
          formatter: '{value}%'
        },
        mergedConfig: {},
        renderer: null,
        svgBorderGradient: [],
        details: '',
        waves: [],
        animation: false
      };
    },

    computed: {
      radius() {
        const {
          shape
        } = this.mergedConfig;
        if (shape === 'round') return '50%';
        if (shape === 'rect') return '0';
        if (shape === 'roundRect') return '10px';
        return '0';
      },

      shape() {
        const {
          shape
        } = this.mergedConfig;
        if (!shape) return 'rect';
        return shape;
      }

    },
    watch: {
      config() {
        const {
          calcData,
          renderer
        } = this;
        renderer.delAllGraph();
        this.waves = [];
        setTimeout(calcData, 0);
      }

    },
    methods: {
      init() {
        const {
          initRender,
          config,
          calcData
        } = this;
        initRender();
        if (!config) return;
        calcData();
      },

      initRender() {
        const {
          $refs
        } = this;
        this.renderer = new CRender($refs['water-pond-level']);
      },

      calcData() {
        const {
          mergeConfig,
          calcSvgBorderGradient,
          calcDetails
        } = this;
        mergeConfig();
        calcSvgBorderGradient();
        calcDetails();
        const {
          addWave,
          animationWave
        } = this;
        addWave();
        animationWave();
      },

      mergeConfig() {
        const {
          config,
          defaultConfig
        } = this;
        this.mergedConfig = util_2$1(util_1(defaultConfig, true), config);
      },

      calcSvgBorderGradient() {
        const {
          colors
        } = this.mergedConfig;
        const colorNum = colors.length;
        const colorOffsetGap = 100 / (colorNum - 1);
        this.svgBorderGradient = colors.map((c, i) => [colorOffsetGap * i, c]);
      },

      calcDetails() {
        const {
          data,
          formatter
        } = this.mergedConfig;

        if (!data.length) {
          this.details = '';
          return;
        }

        const maxValue = Math.max(...data);
        this.details = formatter.replace('{value}', maxValue);
      },

      addWave() {
        const {
          renderer,
          getWaveShapes,
          getWaveStyle,
          drawed
        } = this;
        const shapes = getWaveShapes();
        const style = getWaveStyle();
        this.waves = shapes.map(shape => renderer.add({
          name: 'smoothline',
          animationFrame: 300,
          shape,
          style,
          drawed
        }));
      },

      getWaveShapes() {
        const {
          mergedConfig,
          renderer,
          mergeOffset
        } = this;
        const {
          waveNum,
          waveHeight,
          data
        } = mergedConfig;
        const [w, h] = renderer.area;
        const pointsNum = waveNum * 4 + 4;
        const pointXGap = w / waveNum / 2;
        return data.map(v => {
          let points = new Array(pointsNum).fill(0).map((foo, j) => {
            const x = w - pointXGap * j;
            const startY = (1 - v / 100) * h;
            const y = j % 2 === 0 ? startY : startY - waveHeight;
            return [x, y];
          });
          points = points.map(p => mergeOffset(p, [pointXGap * 2, 0]));
          return {
            points
          };
        });
      },

      mergeOffset([x, y], [ox, oy]) {
        return [x + ox, y + oy];
      },

      getWaveStyle() {
        const {
          renderer,
          mergedConfig
        } = this;
        const h = renderer.area[1];
        return {
          gradientColor: mergedConfig.colors,
          gradientType: 'linear',
          gradientParams: [0, 0, 0, h],
          gradientWith: 'fill',
          opacity: mergedConfig.waveOpacity,
          translate: [0, 0]
        };
      },

      drawed({
        shape: {
          points
        }
      }, {
        ctx,
        area
      }) {
        const firstPoint = points[0];
        const lastPoint = points.slice(-1)[0];
        const h = area[1];
        ctx.lineTo(lastPoint[0], h);
        ctx.lineTo(firstPoint[0], h);
        ctx.closePath();
        ctx.fill();
      },

      async animationWave(repeat = 1) {
        const {
          waves,
          renderer,
          animation
        } = this;
        if (animation) return;
        this.animation = true;
        const w = renderer.area[0];
        waves.forEach(graph => {
          graph.attr('style', {
            translate: [0, 0]
          });
          graph.animation('style', {
            translate: [w, 0]
          }, true);
        });
        await renderer.launchAnimation();
        this.animation = false;
        if (!renderer.graphs.length) return;
        this.animationWave(repeat + 1);
      }

    },

    mounted() {
      const {
        init
      } = this;
      init();
    },

    beforeDestroy() {
      const {
        renderer
      } = this;
      renderer.delAllGraph();
      this.waves = [];
    }

  };

  /* script */
  const __vue_script__$v = script$v;

  /* template */
  var __vue_render__$v = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { staticClass: "dv-water-pond-level" }, [
      _vm.renderer
        ? _c("svg", [
            _c(
              "defs",
              [
                _c(
                  "linearGradient",
                  {
                    attrs: {
                      id: _vm.gradientId,
                      x1: "0%",
                      y1: "0%",
                      x2: "0%",
                      y2: "100%"
                    }
                  },
                  _vm._l(_vm.svgBorderGradient, function(lc) {
                    return _c("stop", {
                      key: lc[0],
                      attrs: { offset: lc[0], "stop-color": lc[1] }
                    })
                  }),
                  1
                )
              ],
              1
            ),
            _vm._v(" "),
            _vm.renderer
              ? _c(
                  "text",
                  {
                    attrs: {
                      stroke: "url(#" + _vm.gradientId + ")",
                      fill: "url(#" + _vm.gradientId + ")",
                      x: _vm.renderer.area[0] / 2 + 8,
                      y: _vm.renderer.area[1] / 2 + 8
                    }
                  },
                  [_vm._v("\n      " + _vm._s(_vm.details) + "\n    ")]
                )
              : _vm._e(),
            _vm._v(" "),
            !_vm.shape || _vm.shape === "round"
              ? _c("ellipse", {
                  attrs: {
                    cx: _vm.renderer.area[0] / 2 + 8,
                    cy: _vm.renderer.area[1] / 2 + 8,
                    rx: _vm.renderer.area[0] / 2 + 5,
                    ry: _vm.renderer.area[1] / 2 + 5,
                    stroke: "url(#" + _vm.gradientId + ")"
                  }
                })
              : _c("rect", {
                  attrs: {
                    x: "2",
                    y: "2",
                    rx: _vm.shape === "roundRect" ? 10 : 0,
                    ry: _vm.shape === "roundRect" ? 10 : 0,
                    width: _vm.renderer.area[0] + 12,
                    height: _vm.renderer.area[1] + 12,
                    stroke: "url(#" + _vm.gradientId + ")"
                  }
                })
          ])
        : _vm._e(),
      _vm._v(" "),
      _c("canvas", {
        ref: "water-pond-level",
        style: "border-radius: " + _vm.radius + ";"
      })
    ])
  };
  var __vue_staticRenderFns__$v = [];
  __vue_render__$v._withStripped = true;

    /* style */
    const __vue_inject_styles__$v = function (inject) {
      if (!inject) return
      inject("data-v-be672a2c_0", { source: ".dv-water-pond-level {\n  position: relative;\n}\n.dv-water-pond-level svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-water-pond-level text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n  fill: none;\n  stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n  margin-top: 8px;\n  margin-left: 8px;\n  width: calc(100% - 16px);\n  height: calc(100% - 16px);\n  box-sizing: border-box;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B;AACA;;EAEE,UAAU;EACV,eAAe;AACjB;AACA;EACE,eAAe;EACf,gBAAgB;EAChB,wBAAwB;EACxB,yBAAyB;EACzB,sBAAsB;AACxB","file":"main.vue","sourcesContent":[".dv-water-pond-level {\n  position: relative;\n}\n.dv-water-pond-level svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-water-pond-level text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n  fill: none;\n  stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n  margin-top: 8px;\n  margin-left: 8px;\n  width: calc(100% - 16px);\n  height: calc(100% - 16px);\n  box-sizing: border-box;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$v = undefined;
    /* module identifier */
    const __vue_module_identifier__$v = undefined;
    /* functional template */
    const __vue_is_functional_template__$v = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$v = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$v, staticRenderFns: __vue_staticRenderFns__$v },
      __vue_inject_styles__$v,
      __vue_script__$v,
      __vue_scope_id__$v,
      __vue_is_functional_template__$v,
      __vue_module_identifier__$v,
      false,
      createInjector,
      undefined,
      undefined
    );

  function waterLevelPond (Vue) {
    Vue.component(__vue_component__$v.name, __vue_component__$v);
  }

  //
  var script$w = {
    name: 'DvPercentPond',
    props: {
      config: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      const id = uuid();
      return {
        gradientId1: `percent-pond-gradientId1-${id}`,
        gradientId2: `percent-pond-gradientId2-${id}`,
        width: 0,
        height: 0,
        defaultConfig: {
          /**
           * @description Value
           * @type {Number}
           * @default value = 0
           */
          value: 0,

          /**
           * @description Colors (hex|rgb|rgba|color keywords)
           * @type {Array<String>}
           * @default colors = ['#00BAFF', '#3DE7C9']
           * @example colors = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
           */
          colors: ['#3DE7C9', '#00BAFF'],

          /**
           * @description Border width
           * @type {Number}
           * @default borderWidth = 3
           */
          borderWidth: 3,

          /**
           * @description Gap between border and pond
           * @type {Number}
           * @default borderGap = 3
           */
          borderGap: 3,

          /**
           * @description Line dash
           * @type {Array<Number>}
           * @default lineDash = [5, 1]
           */
          lineDash: [5, 1],

          /**
           * @description Text color
           * @type {String}
           * @default textColor = '#fff'
           */
          textColor: '#fff',

          /**
           * @description Border radius
           * @type {Number}
           * @default borderRadius = 5
           */
          borderRadius: 5,

          /**
           * @description Local Gradient
           * @type {Boolean}
           * @default localGradient = false
           * @example localGradient = false | true
           */
          localGradient: false,

          /**
           * @description Formatter
           * @type {String}
           * @default formatter = '{value}%'
           */
          formatter: '{value}%'
        },
        mergedConfig: null
      };
    },

    computed: {
      rectWidth() {
        const {
          mergedConfig,
          width
        } = this;
        if (!mergedConfig) return 0;
        const {
          borderWidth
        } = mergedConfig;
        return width - borderWidth;
      },

      rectHeight() {
        const {
          mergedConfig,
          height
        } = this;
        if (!mergedConfig) return 0;
        const {
          borderWidth
        } = mergedConfig;
        return height - borderWidth;
      },

      points() {
        const {
          mergedConfig,
          width,
          height
        } = this;
        const halfHeight = height / 2;
        if (!mergedConfig) return `0, ${halfHeight} 0, ${halfHeight}`;
        const {
          borderWidth,
          borderGap,
          value
        } = mergedConfig;
        const polylineLength = (width - (borderWidth + borderGap) * 2) / 100 * value;
        return `
        ${borderWidth + borderGap}, ${halfHeight}
        ${borderWidth + borderGap + polylineLength}, ${halfHeight + 0.001}
      `;
      },

      polylineWidth() {
        const {
          mergedConfig,
          height
        } = this;
        if (!mergedConfig) return 0;
        const {
          borderWidth,
          borderGap
        } = mergedConfig;
        return height - (borderWidth + borderGap) * 2;
      },

      linearGradient() {
        const {
          mergedConfig
        } = this;
        if (!mergedConfig) return [];
        const {
          colors
        } = mergedConfig;
        const colorNum = colors.length;
        const colorOffsetGap = 100 / (colorNum - 1);
        return colors.map((c, i) => [colorOffsetGap * i, c]);
      },

      polylineGradient() {
        const {
          gradientId1,
          gradientId2,
          mergedConfig
        } = this;
        if (!mergedConfig) return gradientId2;
        if (mergedConfig.localGradient) return gradientId1;
        return gradientId2;
      },

      gradient2XPos() {
        const {
          mergedConfig
        } = this;
        if (!mergedConfig) return '100%';
        const {
          value
        } = mergedConfig;
        return `${200 - value}%`;
      },

      details() {
        const {
          mergedConfig
        } = this;
        if (!mergedConfig) return '';
        const {
          value,
          formatter
        } = mergedConfig;
        return formatter.replace('{value}', value);
      }

    },
    watch: {
      config() {
        const {
          mergeConfig
        } = this;
        mergeConfig();
      }

    },
    methods: {
      async init() {
        const {
          initWH,
          config,
          mergeConfig
        } = this;
        await initWH();
        if (!config) return;
        mergeConfig();
      },

      async initWH() {
        const {
          $nextTick,
          $refs
        } = this;
        await $nextTick();
        const {
          clientWidth,
          clientHeight
        } = $refs['percent-pond'];
        this.width = clientWidth;
        this.height = clientHeight;
      },

      mergeConfig() {
        const {
          config,
          defaultConfig
        } = this;
        this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
      }

    },

    mounted() {
      const {
        init
      } = this;
      init();
    }

  };

  /* script */
  const __vue_script__$w = script$w;

  /* template */
  var __vue_render__$w = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: "percent-pond", staticClass: "dv-percent-pond" }, [
      _c("svg", [
        _c(
          "defs",
          [
            _c(
              "linearGradient",
              {
                attrs: {
                  id: _vm.gradientId1,
                  x1: "0%",
                  y1: "0%",
                  x2: "100%",
                  y2: "0%"
                }
              },
              _vm._l(_vm.linearGradient, function(lc) {
                return _c("stop", {
                  key: lc[0],
                  attrs: { offset: lc[0] + "%", "stop-color": lc[1] }
                })
              }),
              1
            ),
            _vm._v(" "),
            _c(
              "linearGradient",
              {
                attrs: {
                  id: _vm.gradientId2,
                  x1: "0%",
                  y1: "0%",
                  x2: _vm.gradient2XPos,
                  y2: "0%"
                }
              },
              _vm._l(_vm.linearGradient, function(lc) {
                return _c("stop", {
                  key: lc[0],
                  attrs: { offset: lc[0] + "%", "stop-color": lc[1] }
                })
              }),
              1
            )
          ],
          1
        ),
        _vm._v(" "),
        _c("rect", {
          attrs: {
            x: _vm.mergedConfig ? _vm.mergedConfig.borderWidth / 2 : "0",
            y: _vm.mergedConfig ? _vm.mergedConfig.borderWidth / 2 : "0",
            rx: _vm.mergedConfig ? _vm.mergedConfig.borderRadius : "0",
            ry: _vm.mergedConfig ? _vm.mergedConfig.borderRadius : "0",
            fill: "transparent",
            "stroke-width": _vm.mergedConfig ? _vm.mergedConfig.borderWidth : "0",
            stroke: "url(#" + _vm.gradientId1 + ")",
            width: _vm.rectWidth > 0 ? _vm.rectWidth : 0,
            height: _vm.rectHeight > 0 ? _vm.rectHeight : 0
          }
        }),
        _vm._v(" "),
        _c("polyline", {
          attrs: {
            "stroke-width": _vm.polylineWidth,
            "stroke-dasharray": _vm.mergedConfig
              ? _vm.mergedConfig.lineDash.join(",")
              : "0",
            stroke: "url(#" + _vm.polylineGradient + ")",
            points: _vm.points
          }
        }),
        _vm._v(" "),
        _c(
          "text",
          {
            attrs: {
              stroke: _vm.mergedConfig ? _vm.mergedConfig.textColor : "#fff",
              fill: _vm.mergedConfig ? _vm.mergedConfig.textColor : "#fff",
              x: _vm.width / 2,
              y: _vm.height / 2
            }
          },
          [_vm._v("\n      " + _vm._s(_vm.details) + "\n    ")]
        )
      ])
    ])
  };
  var __vue_staticRenderFns__$w = [];
  __vue_render__$w._withStripped = true;

    /* style */
    const __vue_inject_styles__$w = function (inject) {
      if (!inject) return
      inject("data-v-05a0166f_0", { source: ".dv-percent-pond {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.dv-percent-pond svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-percent-pond polyline {\n  transition: all 0.3s;\n}\n.dv-percent-pond text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,sBAAsB;AACxB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,WAAW;EACX,YAAY;AACd;AACA;EACE,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-percent-pond {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.dv-percent-pond svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-percent-pond polyline {\n  transition: all 0.3s;\n}\n.dv-percent-pond text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$w = undefined;
    /* module identifier */
    const __vue_module_identifier__$w = undefined;
    /* functional template */
    const __vue_is_functional_template__$w = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$w = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$w, staticRenderFns: __vue_staticRenderFns__$w },
      __vue_inject_styles__$w,
      __vue_script__$w,
      __vue_scope_id__$w,
      __vue_is_functional_template__$w,
      __vue_module_identifier__$w,
      false,
      createInjector,
      undefined,
      undefined
    );

  function percentPond (Vue) {
    Vue.component(__vue_component__$w.name, __vue_component__$w);
  }

  //
  var script$x = {
    name: 'DvFlylineChart',
    mixins: [autoResize],
    props: {
      config: {
        type: Object,
        default: () => ({})
      },
      dev: {
        type: Boolean,
        default: false
      }
    },

    data() {
      const id = uuid();
      return {
        ref: 'dv-flyline-chart',
        unique: Math.random(),
        maskId: `flyline-mask-id-${id}`,
        maskCircleId: `mask-circle-id-${id}`,
        gradientId: `gradient-id-${id}`,
        gradient2Id: `gradient2-id-${id}`,
        defaultConfig: {
          /**
           * @description Flyline chart center point
           * @type {Array<Number>}
           * @default centerPoint = [0, 0]
           */
          centerPoint: [0, 0],

          /**
           * @description Flyline start points
           * @type {Array<Array<Number>>}
           * @default points = []
           * @example points = [[10, 10], [100, 100]]
           */
          points: [],

          /**
           * @description Flyline width
           * @type {Number}
           * @default lineWidth = 1
           */
          lineWidth: 1,

          /**
           * @description Orbit color
           * @type {String}
           * @default orbitColor = 'rgba(103, 224, 227, .2)'
           */
          orbitColor: 'rgba(103, 224, 227, .2)',

          /**
           * @description Flyline color
           * @type {String}
           * @default orbitColor = '#ffde93'
           */
          flylineColor: '#ffde93',

          /**
           * @description K value
           * @type {Number}
           * @default k = -0.5
           * @example k = -1 ~ 1
           */
          k: -0.5,

          /**
           * @description Flyline curvature
           * @type {Number}
           * @default curvature = 5
           */
          curvature: 5,

          /**
           * @description Flyline radius
           * @type {Number}
           * @default flylineRadius = 100
           */
          flylineRadius: 100,

          /**
           * @description Flyline animation duration
           * @type {Array<Number>}
           * @default duration = [20, 30]
           */
          duration: [20, 30],

          /**
           * @description Relative points position
           * @type {Boolean}
           * @default relative = true
           */
          relative: true,

          /**
           * @description Back ground image url
           * @type {String}
           * @default bgImgUrl = ''
           * @example bgImgUrl = './img/bg.jpg'
           */
          bgImgUrl: '',

          /**
           * @description Text configuration
           * @type {Object}
           */
          text: {
            /**
             * @description Text offset
             * @type {Array<Number>}
             * @default offset = [0, 15]
             */
            offset: [0, 15],

            /**
             * @description Text color
             * @type {String}
             * @default color = '#ffdb5c'
             */
            color: '#ffdb5c',

            /**
             * @description Text font size
             * @type {Number}
             * @default fontSize = 12
             */
            fontSize: 12
          },

          /**
           * @description Halo configuration
           * @type {Object}
           */
          halo: {
            /**
             * @description Weather to show halo
             * @type {Boolean}
             * @default show = true
             * @example show = true | false
             */
            show: true,

            /**
             * @description Halo animation duration (10 = 1s)
             * @type {Number}
             * @default duration = 30
             */
            duration: 30,

            /**
             * @description Halo color
             * @type {String}
             * @default color = '#fb7293'
             */
            color: '#fb7293',

            /**
             * @description Halo max radius
             * @type {Number}
             * @default radius = 120
             */
            radius: 120
          },

          /**
           * @description Center point img configuration
           * @type {Object}
           */
          centerPointImg: {
            /**
             * @description Center point img width
             * @type {Number}
             * @default width = 40
             */
            width: 40,

            /**
             * @description Center point img height
             * @type {Number}
             * @default height = 40
             */
            height: 40,

            /**
             * @description Center point img url
             * @type {String}
             * @default url = ''
             */
            url: ''
          },

          /**
           * @description Points img configuration
           * @type {Object}
           * @default radius = 120
           */
          pointsImg: {
            /**
             * @description Points img width
             * @type {Number}
             * @default width = 15
             */
            width: 15,

            /**
             * @description Points img height
             * @type {Number}
             * @default height = 15
             */
            height: 15,

            /**
             * @description Points img url
             * @type {String}
             * @default url = ''
             */
            url: ''
          }
        },
        mergedConfig: null,
        paths: [],
        lengths: [],
        times: [],
        texts: []
      };
    },

    watch: {
      config() {
        const {
          calcData
        } = this;
        calcData();
      }

    },
    methods: {
      afterAutoResizeMixinInit() {
        const {
          calcData
        } = this;
        calcData();
      },

      onResize() {
        const {
          calcData
        } = this;
        calcData();
      },

      async calcData() {
        const {
          mergeConfig,
          createFlylinePaths,
          calcLineLengths
        } = this;
        mergeConfig();
        createFlylinePaths();
        await calcLineLengths();
        const {
          calcTimes,
          calcTexts
        } = this;
        calcTimes();
        calcTexts();
      },

      mergeConfig() {
        let {
          config,
          defaultConfig
        } = this;
        const mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
        const {
          points
        } = mergedConfig;
        mergedConfig.points = points.map(item => {
          if (item instanceof Array) {
            return {
              position: item,
              text: ''
            };
          }

          return item;
        });
        this.mergedConfig = mergedConfig;
      },

      createFlylinePaths() {
        const {
          getPath,
          mergedConfig,
          width,
          height
        } = this;
        let {
          centerPoint,
          points,
          relative
        } = mergedConfig;
        points = points.map(({
          position
        }) => position);

        if (relative) {
          centerPoint = [width * centerPoint[0], height * centerPoint[1]];
          points = points.map(([x, y]) => [width * x, height * y]);
        }

        this.paths = points.map(point => getPath(centerPoint, point));
      },

      getPath(center, point) {
        const {
          getControlPoint
        } = this;
        const controlPoint = getControlPoint(center, point);
        return [point, controlPoint, center];
      },

      getControlPoint([sx, sy], [ex, ey]) {
        const {
          getKLinePointByx,
          mergedConfig
        } = this;
        const {
          curvature,
          k
        } = mergedConfig;
        const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2];
        const distance = getPointDistance([sx, sy], [ex, ey]);
        const targetLength = distance / curvature;
        const disDived = targetLength / 2;
        let [dx, dy] = [mx, my];

        do {
          dx += disDived;
          dy = getKLinePointByx(k, [mx, my], dx)[1];
        } while (getPointDistance([mx, my], [dx, dy]) < targetLength);

        return [dx, dy];
      },

      getKLinePointByx(k, [lx, ly], x) {
        const y = ly - k * lx + k * x;
        return [x, y];
      },

      async calcLineLengths() {
        const {
          $nextTick,
          paths,
          $refs
        } = this;
        await $nextTick();
        this.lengths = paths.map((foo, i) => $refs[`path${i}`][0].getTotalLength());
      },

      calcTimes() {
        const {
          duration,
          points
        } = this.mergedConfig;
        this.times = points.map(foo => randomExtend(...duration) / 10);
      },

      calcTexts() {
        const {
          points
        } = this.mergedConfig;
        this.texts = points.map(({
          text
        }) => text);
      },

      consoleClickPos({
        offsetX,
        offsetY
      }) {
        const {
          width,
          height,
          dev
        } = this;
        if (!dev) return;
        const relativeX = (offsetX / width).toFixed(2);
        const relativeY = (offsetY / height).toFixed(2);
        console.warn(`dv-flyline-chart DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`);
      }

    }
  };

  /* script */
  const __vue_script__$x = script$x;

  /* template */
  var __vue_render__$x = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c(
      "div",
      {
        ref: "dv-flyline-chart",
        staticClass: "dv-flyline-chart",
        style:
          "background-image: url(" +
          (_vm.mergedConfig ? _vm.mergedConfig.bgImgUrl : "") +
          ")",
        on: { click: _vm.consoleClickPos }
      },
      [
        _vm.mergedConfig
          ? _c(
              "svg",
              { attrs: { width: _vm.width, height: _vm.height } },
              [
                _c(
                  "defs",
                  [
                    _c(
                      "radialGradient",
                      {
                        attrs: {
                          id: _vm.gradientId,
                          cx: "50%",
                          cy: "50%",
                          r: "50%"
                        }
                      },
                      [
                        _c("stop", {
                          attrs: {
                            offset: "0%",
                            "stop-color": "#fff",
                            "stop-opacity": "1"
                          }
                        }),
                        _vm._v(" "),
                        _c("stop", {
                          attrs: {
                            offset: "100%",
                            "stop-color": "#fff",
                            "stop-opacity": "0"
                          }
                        })
                      ],
                      1
                    ),
                    _vm._v(" "),
                    _c(
                      "radialGradient",
                      {
                        attrs: {
                          id: _vm.gradient2Id,
                          cx: "50%",
                          cy: "50%",
                          r: "50%"
                        }
                      },
                      [
                        _c("stop", {
                          attrs: {
                            offset: "0%",
                            "stop-color": "#fff",
                            "stop-opacity": "0"
                          }
                        }),
                        _vm._v(" "),
                        _c("stop", {
                          attrs: {
                            offset: "100%",
                            "stop-color": "#fff",
                            "stop-opacity": "1"
                          }
                        })
                      ],
                      1
                    ),
                    _vm._v(" "),
                    _vm.paths[0]
                      ? _c(
                          "circle",
                          {
                            attrs: {
                              id: "circle" + _vm.paths[0].toString(),
                              cx: _vm.paths[0][2][0],
                              cy: _vm.paths[0][2][1]
                            }
                          },
                          [
                            _c("animate", {
                              attrs: {
                                attributeName: "r",
                                values: "1;" + _vm.mergedConfig.halo.radius,
                                dur: _vm.mergedConfig.halo.duration / 10 + "s",
                                repeatCount: "indefinite"
                              }
                            }),
                            _vm._v(" "),
                            _c("animate", {
                              attrs: {
                                attributeName: "opacity",
                                values: "1;0",
                                dur: _vm.mergedConfig.halo.duration / 10 + "s",
                                repeatCount: "indefinite"
                              }
                            })
                          ]
                        )
                      : _vm._e()
                  ],
                  1
                ),
                _vm._v(" "),
                _vm.paths[0]
                  ? _c("image", {
                      attrs: {
                        "xlink:href": _vm.mergedConfig.centerPointImg.url,
                        width: _vm.mergedConfig.centerPointImg.width,
                        height: _vm.mergedConfig.centerPointImg.height,
                        x:
                          _vm.paths[0][2][0] -
                          _vm.mergedConfig.centerPointImg.width / 2,
                        y:
                          _vm.paths[0][2][1] -
                          _vm.mergedConfig.centerPointImg.height / 2
                      }
                    })
                  : _vm._e(),
                _vm._v(" "),
                _c(
                  "mask",
                  { attrs: { id: "maskhalo" + _vm.paths[0].toString() } },
                  [
                    _vm.paths[0]
                      ? _c("use", {
                          attrs: {
                            "xlink:href": "#circle" + _vm.paths[0].toString(),
                            fill: "url(#" + _vm.gradient2Id + ")"
                          }
                        })
                      : _vm._e()
                  ]
                ),
                _vm._v(" "),
                _vm.paths[0] && _vm.mergedConfig.halo.show
                  ? _c("use", {
                      attrs: {
                        "xlink:href": "#circle" + _vm.paths[0].toString(),
                        fill: _vm.mergedConfig.halo.color,
                        mask: "url(#maskhalo" + _vm.paths[0].toString() + ")"
                      }
                    })
                  : _vm._e(),
                _vm._v(" "),
                _vm._l(_vm.paths, function(path, i) {
                  return _c("g", { key: i }, [
                    _c("defs", [
                      _c("path", {
                        ref: "path" + i,
                        refInFor: true,
                        attrs: {
                          id: "path" + path.toString(),
                          d:
                            "M" +
                            path[0].toString() +
                            " Q" +
                            path[1].toString() +
                            " " +
                            path[2].toString(),
                          fill: "transparent"
                        }
                      })
                    ]),
                    _vm._v(" "),
                    _c("use", {
                      attrs: {
                        "xlink:href": "#path" + path.toString(),
                        "stroke-width": _vm.mergedConfig.lineWidth,
                        stroke: _vm.mergedConfig.orbitColor
                      }
                    }),
                    _vm._v(" "),
                    _vm.lengths[i]
                      ? _c(
                          "use",
                          {
                            attrs: {
                              "xlink:href": "#path" + path.toString(),
                              "stroke-width": _vm.mergedConfig.lineWidth,
                              stroke: _vm.mergedConfig.flylineColor,
                              mask:
                                "url(#mask" + _vm.unique + path.toString() + ")"
                            }
                          },
                          [
                            _c("animate", {
                              attrs: {
                                attributeName: "stroke-dasharray",
                                from: "0, " + _vm.lengths[i],
                                to: _vm.lengths[i] + ", 0",
                                dur: _vm.times[i] || 0,
                                repeatCount: "indefinite"
                              }
                            })
                          ]
                        )
                      : _vm._e(),
                    _vm._v(" "),
                    _c(
                      "mask",
                      { attrs: { id: "mask" + _vm.unique + path.toString() } },
                      [
                        _c(
                          "circle",
                          {
                            attrs: {
                              cx: "0",
                              cy: "0",
                              r: _vm.mergedConfig.flylineRadius,
                              fill: "url(#" + _vm.gradientId + ")"
                            }
                          },
                          [
                            _c("animateMotion", {
                              attrs: {
                                dur: _vm.times[i] || 0,
                                path:
                                  "M" +
                                  path[0].toString() +
                                  " Q" +
                                  path[1].toString() +
                                  " " +
                                  path[2].toString(),
                                rotate: "auto",
                                repeatCount: "indefinite"
                              }
                            })
                          ],
                          1
                        )
                      ]
                    ),
                    _vm._v(" "),
                    _c("image", {
                      attrs: {
                        "xlink:href": _vm.mergedConfig.pointsImg.url,
                        width: _vm.mergedConfig.pointsImg.width,
                        height: _vm.mergedConfig.pointsImg.height,
                        x: path[0][0] - _vm.mergedConfig.pointsImg.width / 2,
                        y: path[0][1] - _vm.mergedConfig.pointsImg.height / 2
                      }
                    }),
                    _vm._v(" "),
                    _c(
                      "text",
                      {
                        style:
                          "fontSize:" + _vm.mergedConfig.text.fontSize + "px;",
                        attrs: {
                          fill: _vm.mergedConfig.text.color,
                          x: path[0][0] + _vm.mergedConfig.text.offset[0],
                          y: path[0][1] + _vm.mergedConfig.text.offset[1]
                        }
                      },
                      [_vm._v("\n        " + _vm._s(_vm.texts[i]) + "\n      ")]
                    )
                  ])
                })
              ],
              2
            )
          : _vm._e()
      ]
    )
  };
  var __vue_staticRenderFns__$x = [];
  __vue_render__$x._withStripped = true;

    /* style */
    const __vue_inject_styles__$x = function (inject) {
      if (!inject) return
      inject("data-v-1edfcf29_0", { source: ".dv-flyline-chart {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n  transition: all 0.3s;\n}\n.dv-flyline-chart text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,oBAAoB;AACtB;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-flyline-chart {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n  transition: all 0.3s;\n}\n.dv-flyline-chart text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$x = undefined;
    /* module identifier */
    const __vue_module_identifier__$x = undefined;
    /* functional template */
    const __vue_is_functional_template__$x = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$x = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$x, staticRenderFns: __vue_staticRenderFns__$x },
      __vue_inject_styles__$x,
      __vue_script__$x,
      __vue_scope_id__$x,
      __vue_is_functional_template__$x,
      __vue_module_identifier__$x,
      false,
      createInjector,
      undefined,
      undefined
    );

  function flylineChart (Vue) {
    Vue.component(__vue_component__$x.name, __vue_component__$x);
  }

  //
  var script$y = {
    name: 'DvFlylineChartEnhanced',
    mixins: [autoResize],
    props: {
      config: {
        type: Object,
        default: () => ({})
      },
      dev: {
        type: Boolean,
        default: false
      }
    },

    data() {
      const id = uuid();
      return {
        ref: 'dv-flyline-chart-enhanced',
        unique: Math.random(),
        flylineGradientId: `flyline-gradient-id-${id}`,
        haloGradientId: `halo-gradient-id-${id}`,

        /**
         * @description Type Declaration
         * 
         * interface Halo {
         *    show?: boolean
         *    duration?: [number, number]
         *    color?: string
         *    radius?: number
         * }
         * 
         * interface Text {
         *    show?: boolean
         *    offset?: [number, number]
         *    color?: string
         *    fontSize?: number
         * }
         * 
         * interface Icon {
         *    show?: boolean
         *    src?: string
         *    width?: number
         *    height?: number
         * }
         * 
         * interface Point {
         *    name: string
         *    coordinate: [number, number]
         *    halo?: Halo
         *    text?: Text
         *    icon?: Icon
         * }
         * 
         * interface Line {
         *    width?: number
         *    color?: string
         *    orbitColor?: string
         *    duration?: [number, number]
         *    radius?: string
         * }
         * 
         * interface Flyline extends Line {
         *    source: string
         *    target: string
         * }
         * 
         * interface FlylineWithPath extends Flyline {
         *    d: string
         *    path: [[number, number], [number, number], [number, number]]
         *    key: string
         * }
         */
        defaultConfig: {
          /**
           * @description Flyline chart points
           * @type {Point[]}
           * @default points = []
           */
          points: [],

          /**
           * @description Lines
           * @type {Flyline[]}
           * @default lines = []
           */
          lines: [],

          /**
           * @description Global halo configuration
           * @type {Halo}
           */
          halo: {
            /**
             * @description Whether to show halo
             * @type {Boolean}
             * @default show = false
             */
            show: false,

            /**
             * @description Halo animation duration (1s = 10)
             * @type {[number, number]}
             */
            duration: [20, 30],

            /**
             * @description Halo color
             * @type {String}
             * @default color = '#fb7293'
             */
            color: '#fb7293',

            /**
             * @description Halo radius
             * @type {Number}
             * @default radius = 120
             */
            radius: 120
          },

          /**
           * @description Global text configuration
           * @type {Text}
           */
          text: {
            /**
             * @description Whether to show text
             * @type {Boolean}
             * @default show = false
             */
            show: false,

            /**
             * @description Text offset
             * @type {[number, number]}
             * @default offset = [0, 15]
             */
            offset: [0, 15],

            /**
             * @description Text color
             * @type {String}
             * @default color = '#ffdb5c'
             */
            color: '#ffdb5c',

            /**
             * @description Text font size
             * @type {Number}
             * @default fontSize = 12
             */
            fontSize: 12
          },

          /**
           * @description Global icon configuration
           * @type {Icon}
           */
          icon: {
            /**
             * @description Whether to show icon
             * @type {Boolean}
             * @default show = false
             */
            show: false,

            /**
             * @description Icon src
             * @type {String}
             * @default src = ''
             */
            src: '',

            /**
             * @description Icon width
             * @type {Number}
             * @default width = 15
             */
            width: 15,

            /**
             * @description Icon height
             * @type {Number}
             * @default width = 15
             */
            height: 15
          },

          /**
           * @description Global line configuration
           * @type {Line}
           */
          line: {
            /**
             * @description Line width
             * @type {Number}
             * @default width = 1
             */
            width: 1,

            /**
             * @description Flyline color
             * @type {String}
             * @default color = '#ffde93'
             */
            color: '#ffde93',

            /**
             * @description Orbit color
             * @type {String}
             * @default orbitColor = 'rgba(103, 224, 227, .2)'
             */
            orbitColor: 'rgba(103, 224, 227, .2)',

            /**
             * @description Flyline animation duration
             * @type {[number, number]}
             * @default duration = [20, 30]
             */
            duration: [20, 30],

            /**
             * @description Flyline radius
             * @type {Number}
             * @default radius = 100
             */
            radius: 100
          },

          /**
           * @description Back ground image url
           * @type {String}
           * @default bgImgSrc = ''
           */
          bgImgSrc: '',

          /**
           * @description K value
           * @type {Number}
           * @default k = -0.5
           * @example k = -1 ~ 1
           */
          k: -0.5,

          /**
           * @description Flyline curvature
           * @type {Number}
           * @default curvature = 5
           */
          curvature: 5,

          /**
           * @description Relative points position
           * @type {Boolean}
           * @default relative = true
           */
          relative: true
        },

        /**
         * @description Fly line data
         * @type {FlylineWithPath[]}
         * @default flylines = []
         */
        flylines: [],

        /**
         * @description Fly line lengths
         * @type {Number[]}
         * @default flylineLengths = []
         */
        flylineLengths: [],

        /**
         * @description Fly line points
         * @default flylinePoints = []
         */
        flylinePoints: [],
        mergedConfig: null
      };
    },

    watch: {
      config() {
        const {
          calcData
        } = this;
        calcData();
      }

    },
    methods: {
      afterAutoResizeMixinInit() {
        const {
          calcData
        } = this;
        calcData();
      },

      onResize() {
        const {
          calcData
        } = this;
        calcData();
      },

      async calcData() {
        const {
          mergeConfig,
          calcflylinePoints,
          calcLinePaths
        } = this;
        mergeConfig();
        calcflylinePoints();
        calcLinePaths();
        const {
          calcLineLengths
        } = this;
        await calcLineLengths();
      },

      mergeConfig() {
        let {
          config,
          defaultConfig
        } = this;
        const mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
        const {
          points,
          lines,
          halo,
          text,
          icon,
          line
        } = mergedConfig;
        mergedConfig.points = points.map(item => {
          item.halo = util_2$1(util_1(halo, true), item.halo || {});
          item.text = util_2$1(util_1(text, true), item.text || {});
          item.icon = util_2$1(util_1(icon, true), item.icon || {});
          return item;
        });
        mergedConfig.lines = lines.map(item => {
          return util_2$1(util_1(line, true), item);
        });
        this.mergedConfig = mergedConfig;
      },

      calcflylinePoints() {
        const {
          mergedConfig,
          width,
          height
        } = this;
        const {
          relative,
          points
        } = mergedConfig;
        this.flylinePoints = points.map((item, i) => {
          const {
            coordinate: [x, y],
            halo,
            icon,
            text
          } = item;
          if (relative) item.coordinate = [x * width, y * height];
          item.halo.time = randomExtend(...halo.duration) / 10;
          const {
            width: iw,
            height: ih
          } = icon;
          item.icon.x = item.coordinate[0] - iw / 2;
          item.icon.y = item.coordinate[1] - ih / 2;
          const [ox, oy] = text.offset;
          item.text.x = item.coordinate[0] + ox;
          item.text.y = item.coordinate[1] + oy;
          item.key = `${item.coordinate.toString()}${i}`;
          return item;
        });
      },

      calcLinePaths() {
        const {
          getPath,
          mergedConfig
        } = this;
        const {
          points,
          lines
        } = mergedConfig;
        this.flylines = lines.map(item => {
          const {
            source,
            target,
            duration
          } = item;
          const sourcePoint = points.find(({
            name
          }) => name === source).coordinate;
          const targetPoint = points.find(({
            name
          }) => name === target).coordinate;
          const path = getPath(sourcePoint, targetPoint).map(item => item.map(v => parseFloat(v.toFixed(10))));
          const d = `M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`;
          const key = `path${path.toString()}`;
          const time = randomExtend(...duration) / 10;
          return { ...item,
            path,
            key,
            d,
            time
          };
        });
      },

      getPath(start, end) {
        const {
          getControlPoint
        } = this;
        const controlPoint = getControlPoint(start, end);
        return [start, controlPoint, end];
      },

      getControlPoint([sx, sy], [ex, ey]) {
        const {
          getKLinePointByx,
          mergedConfig
        } = this;
        const {
          curvature,
          k
        } = mergedConfig;
        const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2];
        const distance = getPointDistance([sx, sy], [ex, ey]);
        const targetLength = distance / curvature;
        const disDived = targetLength / 2;
        let [dx, dy] = [mx, my];

        do {
          dx += disDived;
          dy = getKLinePointByx(k, [mx, my], dx)[1];
        } while (getPointDistance([mx, my], [dx, dy]) < targetLength);

        return [dx, dy];
      },

      getKLinePointByx(k, [lx, ly], x) {
        const y = ly - k * lx + k * x;
        return [x, y];
      },

      async calcLineLengths() {
        const {
          $nextTick,
          flylines,
          $refs
        } = this;
        await $nextTick();
        this.flylineLengths = flylines.map(({
          key
        }) => $refs[key][0].getTotalLength());
      },

      consoleClickPos({
        offsetX,
        offsetY
      }) {
        const {
          width,
          height,
          dev
        } = this;
        if (!dev) return;
        const relativeX = (offsetX / width).toFixed(2);
        const relativeY = (offsetY / height).toFixed(2);
        console.warn(`dv-flyline-chart-enhanced DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`);
      }

    }
  };

  /* script */
  const __vue_script__$y = script$y;

  /* template */
  var __vue_render__$y = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c(
      "div",
      {
        ref: _vm.ref,
        staticClass: "dv-flyline-chart-enhanced",
        style:
          "background-image: url(" +
          (_vm.mergedConfig ? _vm.mergedConfig.bgImgSrc : "") +
          ")",
        on: { click: _vm.consoleClickPos }
      },
      [
        _vm.flylines.length
          ? _c(
              "svg",
              { attrs: { width: _vm.width, height: _vm.height } },
              [
                _c(
                  "defs",
                  [
                    _c(
                      "radialGradient",
                      {
                        attrs: {
                          id: _vm.flylineGradientId,
                          cx: "50%",
                          cy: "50%",
                          r: "50%"
                        }
                      },
                      [
                        _c("stop", {
                          attrs: {
                            offset: "0%",
                            "stop-color": "#fff",
                            "stop-opacity": "1"
                          }
                        }),
                        _vm._v(" "),
                        _c("stop", {
                          attrs: {
                            offset: "100%",
                            "stop-color": "#fff",
                            "stop-opacity": "0"
                          }
                        })
                      ],
                      1
                    ),
                    _vm._v(" "),
                    _c(
                      "radialGradient",
                      {
                        attrs: {
                          id: _vm.haloGradientId,
                          cx: "50%",
                          cy: "50%",
                          r: "50%"
                        }
                      },
                      [
                        _c("stop", {
                          attrs: {
                            offset: "0%",
                            "stop-color": "#fff",
                            "stop-opacity": "0"
                          }
                        }),
                        _vm._v(" "),
                        _c("stop", {
                          attrs: {
                            offset: "100%",
                            "stop-color": "#fff",
                            "stop-opacity": "1"
                          }
                        })
                      ],
                      1
                    )
                  ],
                  1
                ),
                _vm._v(" "),
                _vm._l(_vm.flylinePoints, function(point) {
                  return _c("g", { key: point.key + Math.random() }, [
                    _c("defs", [
                      point.halo.show
                        ? _c(
                            "circle",
                            {
                              attrs: {
                                id: "halo" + _vm.unique + point.key,
                                cx: point.coordinate[0],
                                cy: point.coordinate[1]
                              }
                            },
                            [
                              _c("animate", {
                                attrs: {
                                  attributeName: "r",
                                  values: "1;" + point.halo.radius,
                                  dur: point.halo.time + "s",
                                  repeatCount: "indefinite"
                                }
                              }),
                              _vm._v(" "),
                              _c("animate", {
                                attrs: {
                                  attributeName: "opacity",
                                  values: "1;0",
                                  dur: point.halo.time + "s",
                                  repeatCount: "indefinite"
                                }
                              })
                            ]
                          )
                        : _vm._e()
                    ]),
                    _vm._v(" "),
                    _c(
                      "mask",
                      { attrs: { id: "mask" + _vm.unique + point.key } },
                      [
                        point.halo.show
                          ? _c("use", {
                              attrs: {
                                "xlink:href": "#halo" + _vm.unique + point.key,
                                fill: "url(#" + _vm.haloGradientId + ")"
                              }
                            })
                          : _vm._e()
                      ]
                    ),
                    _vm._v(" "),
                    point.halo.show
                      ? _c("use", {
                          attrs: {
                            "xlink:href": "#halo" + _vm.unique + point.key,
                            fill: point.halo.color,
                            mask: "url(#mask" + _vm.unique + point.key + ")"
                          }
                        })
                      : _vm._e(),
                    _vm._v(" "),
                    point.icon.show
                      ? _c("image", {
                          attrs: {
                            "xlink:href": point.icon.src,
                            width: point.icon.width,
                            height: point.icon.height,
                            x: point.icon.x,
                            y: point.icon.y
                          }
                        })
                      : _vm._e(),
                    _vm._v(" "),
                    point.text.show
                      ? _c(
                          "text",
                          {
                            style:
                              "fontSize:" +
                              point.text.fontSize +
                              "px;color:" +
                              point.text.color,
                            attrs: {
                              fill: point.text.color,
                              x: point.text.x,
                              y: point.text.y
                            }
                          },
                          [_vm._v("\n        " + _vm._s(point.name) + "\n      ")]
                        )
                      : _vm._e()
                  ])
                }),
                _vm._v(" "),
                _vm._l(_vm.flylines, function(line, i) {
                  return _c("g", { key: line.key + Math.random() }, [
                    _c("defs", [
                      _c("path", {
                        ref: line.key,
                        refInFor: true,
                        attrs: { id: line.key, d: line.d, fill: "transparent" }
                      })
                    ]),
                    _vm._v(" "),
                    _c("use", {
                      attrs: {
                        "xlink:href": "#" + line.key,
                        "stroke-width": line.width,
                        stroke: line.orbitColor
                      }
                    }),
                    _vm._v(" "),
                    _c(
                      "mask",
                      { attrs: { id: "mask" + _vm.unique + line.key } },
                      [
                        _c(
                          "circle",
                          {
                            attrs: {
                              cx: "0",
                              cy: "0",
                              r: line.radius,
                              fill: "url(#" + _vm.flylineGradientId + ")"
                            }
                          },
                          [
                            _c("animateMotion", {
                              attrs: {
                                dur: line.time,
                                path: line.d,
                                rotate: "auto",
                                repeatCount: "indefinite"
                              }
                            })
                          ],
                          1
                        )
                      ]
                    ),
                    _vm._v(" "),
                    _vm.flylineLengths[i]
                      ? _c(
                          "use",
                          {
                            attrs: {
                              "xlink:href": "#" + line.key,
                              "stroke-width": line.width,
                              stroke: line.color,
                              mask: "url(#mask" + _vm.unique + line.key + ")"
                            }
                          },
                          [
                            _c("animate", {
                              attrs: {
                                attributeName: "stroke-dasharray",
                                from: "0, " + _vm.flylineLengths[i],
                                to: _vm.flylineLengths[i] + ", 0",
                                dur: line.time,
                                repeatCount: "indefinite"
                              }
                            })
                          ]
                        )
                      : _vm._e()
                  ])
                })
              ],
              2
            )
          : _vm._e()
      ]
    )
  };
  var __vue_staticRenderFns__$y = [];
  __vue_render__$y._withStripped = true;

    /* style */
    const __vue_inject_styles__$y = function (inject) {
      if (!inject) return
      inject("data-v-a7b8c35c_0", { source: ".dv-flyline-chart-enhanced {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-flyline-chart-enhanced {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$y = undefined;
    /* module identifier */
    const __vue_module_identifier__$y = undefined;
    /* functional template */
    const __vue_is_functional_template__$y = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$y = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$y, staticRenderFns: __vue_staticRenderFns__$y },
      __vue_inject_styles__$y,
      __vue_script__$y,
      __vue_scope_id__$y,
      __vue_is_functional_template__$y,
      __vue_module_identifier__$y,
      false,
      createInjector,
      undefined,
      undefined
    );

  function flylineChartEnhanced (Vue) {
    Vue.component(__vue_component__$y.name, __vue_component__$y);
  }

  //
  var script$z = {
    name: 'DvConicalColumnChart',
    mixins: [autoResize],
    props: {
      config: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      return {
        ref: 'conical-column-chart',
        defaultConfig: {
          /**
           * @description Chart data
           * @type {Array<Object>}
           * @default data = []
           */
          data: [],

          /**
           * @description Chart img
           * @type {Array<String>}
           * @default img = []
           */
          img: [],

          /**
           * @description Chart font size
           * @type {Number}
           * @default fontSize = 12
           */
          fontSize: 12,

          /**
           * @description Img side length
           * @type {Number}
           * @default imgSideLength = 30
           */
          imgSideLength: 30,

          /**
           * @description Column color
           * @type {String}
           * @default columnColor = 'rgba(0, 194, 255, 0.4)'
           */
          columnColor: 'rgba(0, 194, 255, 0.4)',

          /**
           * @description Text color
           * @type {String}
           * @default textColor = '#fff'
           */
          textColor: '#fff',

          /**
           * @description Show value
           * @type {Boolean}
           * @default showValue = false
           */
          showValue: false
        },
        mergedConfig: null,
        column: []
      };
    },

    watch: {
      config() {
        const {
          calcData
        } = this;
        calcData();
      }

    },
    methods: {
      afterAutoResizeMixinInit() {
        const {
          calcData
        } = this;
        calcData();
      },

      onResize() {
        const {
          calcData
        } = this;
        calcData();
      },

      calcData() {
        const {
          mergeConfig,
          initData,
          calcSVGPath
        } = this;
        mergeConfig();
        initData();
        calcSVGPath();
      },

      mergeConfig() {
        const {
          defaultConfig,
          config
        } = this;
        this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
      },

      initData() {
        const {
          mergedConfig
        } = this;
        let {
          data
        } = mergedConfig;
        data = util_1(data, true);
        data.sort(({
          value: a
        }, {
          value: b
        }) => {
          if (a > b) return -1;
          if (a < b) return 1;
          if (a === b) return 0;
        });
        const max = data[0] ? data[0].value : 10;
        data = data.map(item => ({ ...item,
          percent: item.value / max
        }));
        mergedConfig.data = data;
      },

      calcSVGPath() {
        const {
          mergedConfig,
          width,
          height
        } = this;
        const {
          imgSideLength,
          fontSize,
          data
        } = mergedConfig;
        const itemNum = data.length;
        const gap = width / (itemNum + 1);
        const useAbleHeight = height - imgSideLength - fontSize - 5;
        const svgBottom = height - fontSize - 5;
        this.column = data.map((item, i) => {
          const {
            percent
          } = item;
          const middleXPos = gap * (i + 1);
          const leftXPos = gap * i;
          const rightXpos = gap * (i + 2);
          const middleYPos = svgBottom - useAbleHeight * percent;
          const controlYPos = useAbleHeight * percent * 0.6 + middleYPos;
          const d = `
          M${leftXPos}, ${svgBottom}
          Q${middleXPos}, ${controlYPos} ${middleXPos},${middleYPos}
          M${middleXPos},${middleYPos}
          Q${middleXPos}, ${controlYPos} ${rightXpos},${svgBottom}
          L${leftXPos}, ${svgBottom}
          Z
        `;
          const textY = (svgBottom + middleYPos) / 2 + fontSize / 2;
          return { ...item,
            d,
            x: middleXPos,
            y: middleYPos,
            textY
          };
        });
      }

    }
  };

  /* script */
  const __vue_script__$z = script$z;

  /* template */
  var __vue_render__$z = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-conical-column-chart" }, [
      _c(
        "svg",
        { attrs: { width: _vm.width, height: _vm.height } },
        _vm._l(_vm.column, function(item, i) {
          return _c("g", { key: i }, [
            _c("path", {
              attrs: { d: item.d, fill: _vm.mergedConfig.columnColor }
            }),
            _vm._v(" "),
            _c(
              "text",
              {
                style: "fontSize:" + _vm.mergedConfig.fontSize + "px",
                attrs: {
                  fill: _vm.mergedConfig.textColor,
                  x: item.x,
                  y: _vm.height - 4
                }
              },
              [_vm._v("\n        " + _vm._s(item.name) + "\n      ")]
            ),
            _vm._v(" "),
            _vm.mergedConfig.img.length
              ? _c("image", {
                  attrs: {
                    "xlink:href":
                      _vm.mergedConfig.img[i % _vm.mergedConfig.img.length],
                    width: _vm.mergedConfig.imgSideLength,
                    height: _vm.mergedConfig.imgSideLength,
                    x: item.x - _vm.mergedConfig.imgSideLength / 2,
                    y: item.y - _vm.mergedConfig.imgSideLength
                  }
                })
              : _vm._e(),
            _vm._v(" "),
            _vm.mergedConfig.showValue
              ? _c(
                  "text",
                  {
                    style: "fontSize:" + _vm.mergedConfig.fontSize + "px",
                    attrs: {
                      fill: _vm.mergedConfig.textColor,
                      x: item.x,
                      y: item.textY
                    }
                  },
                  [_vm._v("\n        " + _vm._s(item.value) + "\n      ")]
                )
              : _vm._e()
          ])
        }),
        0
      )
    ])
  };
  var __vue_staticRenderFns__$z = [];
  __vue_render__$z._withStripped = true;

    /* style */
    const __vue_inject_styles__$z = function (inject) {
      if (!inject) return
      inject("data-v-382f06c7_0", { source: ".dv-conical-column-chart {\n  width: 100%;\n  height: 100%;\n}\n.dv-conical-column-chart text {\n  text-anchor: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,mBAAmB;AACrB","file":"main.vue","sourcesContent":[".dv-conical-column-chart {\n  width: 100%;\n  height: 100%;\n}\n.dv-conical-column-chart text {\n  text-anchor: middle;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$z = undefined;
    /* module identifier */
    const __vue_module_identifier__$z = undefined;
    /* functional template */
    const __vue_is_functional_template__$z = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$z = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$z, staticRenderFns: __vue_staticRenderFns__$z },
      __vue_inject_styles__$z,
      __vue_script__$z,
      __vue_scope_id__$z,
      __vue_is_functional_template__$z,
      __vue_module_identifier__$z,
      false,
      createInjector,
      undefined,
      undefined
    );

  function conicalColumnChart (Vue) {
    Vue.component(__vue_component__$z.name, __vue_component__$z);
  }

  function digitalFlop (Vue) {
    Vue.component(__vue_component__$s.name, __vue_component__$s);
  }

  //
  var script$A = {
    name: 'DvScrollBoard',
    mixins: [autoResize],
    props: {
      config: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      return {
        ref: 'scroll-board',
        defaultConfig: {
          /**
           * @description Board header
           * @type {Array<String>}
           * @default header = []
           * @example header = ['column1', 'column2', 'column3']
           */
          header: [],

          /**
           * @description Board data
           * @type {Array<Array>}
           * @default data = []
           */
          data: [],

          /**
           * @description Row num
           * @type {Number}
           * @default rowNum = 5
           */
          rowNum: 5,

          /**
           * @description Header background color
           * @type {String}
           * @default headerBGC = '#00BAFF'
           */
          headerBGC: '#00BAFF',

          /**
           * @description Odd row background color
           * @type {String}
           * @default oddRowBGC = '#003B51'
           */
          oddRowBGC: '#003B51',

          /**
           * @description Even row background color
           * @type {String}
           * @default evenRowBGC = '#003B51'
           */
          evenRowBGC: '#0A2732',

          /**
           * @description Scroll wait time
           * @type {Number}
           * @default waitTime = 2000
           */
          waitTime: 2000,

          /**
           * @description Header height
           * @type {Number}
           * @default headerHeight = 35
           */
          headerHeight: 35,

          /**
           * @description Column width
           * @type {Array<Number>}
           * @default columnWidth = []
           */
          columnWidth: [],

          /**
           * @description Column align
           * @type {Array<String>}
           * @default align = []
           * @example align = ['left', 'center', 'right']
           */
          align: [],

          /**
           * @description Show index
           * @type {Boolean}
           * @default index = false
           */
          index: false,

          /**
           * @description index Header
           * @type {String}
           * @default indexHeader = '#'
           */
          indexHeader: '#',

          /**
           * @description Carousel type
           * @type {String}
           * @default carousel = 'single'
           * @example carousel = 'single' | 'page'
           */
          carousel: 'single',

          /**
           * @description Pause scroll when mouse hovered
           * @type {Boolean}
           * @default hoverPause = true
           * @example hoverPause = true | false
           */
          hoverPause: true
        },
        mergedConfig: null,
        header: [],
        rowsData: [],
        rows: [],
        widths: [],
        heights: [],
        avgHeight: 0,
        aligns: [],
        animationIndex: 0,
        animationHandler: '',
        updater: 0,
        needCalc: false
      };
    },

    watch: {
      config() {
        const {
          stopAnimation,
          calcData
        } = this;
        stopAnimation();
        this.animationIndex = 0;
        calcData();
      }

    },
    methods: {
      handleHover(enter, ri, ci, row, ceil) {
        const {
          mergedConfig,
          emitEvent,
          stopAnimation,
          animation
        } = this;
        if (enter) emitEvent('mouseover', ri, ci, row, ceil);
        if (!mergedConfig.hoverPause) return;

        if (enter) {
          stopAnimation();
        } else {
          animation(true);
        }
      },

      afterAutoResizeMixinInit() {
        const {
          calcData
        } = this;
        calcData();
      },

      onResize() {
        const {
          mergedConfig,
          calcWidths,
          calcHeights
        } = this;
        if (!mergedConfig) return;
        calcWidths();
        calcHeights();
      },

      calcData() {
        const {
          mergeConfig,
          calcHeaderData,
          calcRowsData
        } = this;
        mergeConfig();
        calcHeaderData();
        calcRowsData();
        const {
          calcWidths,
          calcHeights,
          calcAligns
        } = this;
        calcWidths();
        calcHeights();
        calcAligns();
        const {
          animation
        } = this;
        animation(true);
      },

      mergeConfig() {
        let {
          config,
          defaultConfig
        } = this;
        this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
      },

      calcHeaderData() {
        let {
          header,
          index,
          indexHeader
        } = this.mergedConfig;

        if (!header.length) {
          this.header = [];
          return;
        }

        header = [...header];
        if (index) header.unshift(indexHeader);
        this.header = header;
      },

      calcRowsData() {
        let {
          data,
          index,
          headerBGC,
          rowNum
        } = this.mergedConfig;

        if (index) {
          data = data.map((row, i) => {
            row = [...row];
            const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</span>`;
            row.unshift(indexTag);
            return row;
          });
        }

        data = data.map((ceils, i) => ({
          ceils,
          rowIndex: i
        }));
        const rowLength = data.length;

        if (rowLength > rowNum && rowLength < 2 * rowNum) {
          data = [...data, ...data];
        }

        data = data.map((d, i) => ({ ...d,
          scroll: i
        }));
        this.rowsData = data;
        this.rows = data;
      },

      calcWidths() {
        const {
          width,
          mergedConfig,
          rowsData
        } = this;
        const {
          columnWidth,
          header
        } = mergedConfig;
        const usedWidth = columnWidth.reduce((all, w) => all + w, 0);
        let columnNum = 0;

        if (rowsData[0]) {
          columnNum = rowsData[0].ceils.length;
        } else if (header.length) {
          columnNum = header.length;
        }

        const avgWidth = (width - usedWidth) / (columnNum - columnWidth.length);
        const widths = new Array(columnNum).fill(avgWidth);
        this.widths = util_2$1(widths, columnWidth);
      },

      calcHeights(onresize = false) {
        const {
          height,
          mergedConfig,
          header
        } = this;
        const {
          headerHeight,
          rowNum,
          data
        } = mergedConfig;
        let allHeight = height;
        if (header.length) allHeight -= headerHeight;
        const avgHeight = allHeight / rowNum;
        this.avgHeight = avgHeight;
        if (!onresize) this.heights = new Array(data.length).fill(avgHeight);
      },

      calcAligns() {
        const {
          header,
          mergedConfig
        } = this;
        const columnNum = header.length;
        let aligns = new Array(columnNum).fill('left');
        const {
          align
        } = mergedConfig;
        this.aligns = util_2$1(aligns, align);
      },

      async animation(start = false) {
        const {
          needCalc,
          calcHeights,
          calcRowsData
        } = this;

        if (needCalc) {
          calcRowsData();
          calcHeights();
          this.needCalc = false;
        }

        let {
          avgHeight,
          animationIndex,
          mergedConfig,
          rowsData,
          animation,
          updater
        } = this;
        const {
          waitTime,
          carousel,
          rowNum
        } = mergedConfig;
        const rowLength = rowsData.length;
        if (rowNum >= rowLength) return;

        if (start) {
          await new Promise(resolve => setTimeout(resolve, waitTime));
          if (updater !== this.updater) return;
        }

        const animationNum = carousel === 'single' ? 1 : rowNum;
        let rows = rowsData.slice(animationIndex);
        rows.push(...rowsData.slice(0, animationIndex));
        this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1);
        this.heights = new Array(rowLength).fill(avgHeight);
        await new Promise(resolve => setTimeout(resolve, 300));
        if (updater !== this.updater) return;
        this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0));
        animationIndex += animationNum;
        const back = animationIndex - rowLength;
        if (back >= 0) animationIndex = back;
        this.animationIndex = animationIndex;
        this.animationHandler = setTimeout(animation, waitTime - 300);
      },

      stopAnimation() {
        const {
          animationHandler,
          updater
        } = this;
        this.updater = (updater + 1) % 999999;
        if (!animationHandler) return;
        clearTimeout(animationHandler);
      },

      emitEvent(type, ri, ci, row, ceil) {
        const {
          ceils,
          rowIndex
        } = row;
        this.$emit(type, {
          row: ceils,
          ceil,
          rowIndex,
          columnIndex: ci
        });
      },

      updateRows(rows, animationIndex) {
        const {
          mergedConfig,
          animationHandler,
          animation
        } = this;
        this.mergedConfig = { ...mergedConfig,
          data: [...rows]
        };
        this.needCalc = true;
        if (typeof animationIndex === 'number') this.animationIndex = animationIndex;
        if (!animationHandler) animation(true);
      }

    },

    destroyed() {
      const {
        stopAnimation
      } = this;
      stopAnimation();
    }

  };

  /* script */
  const __vue_script__$A = script$A;

  /* template */
  var __vue_render__$A = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c("div", { ref: _vm.ref, staticClass: "dv-scroll-board" }, [
      _vm.header.length && _vm.mergedConfig
        ? _c(
            "div",
            {
              staticClass: "header",
              style: "background-color: " + _vm.mergedConfig.headerBGC + ";"
            },
            _vm._l(_vm.header, function(headerItem, i) {
              return _c("div", {
                key: "" + headerItem + i,
                staticClass: "header-item",
                style:
                  "\n        height: " +
                  _vm.mergedConfig.headerHeight +
                  "px;\n        line-height: " +
                  _vm.mergedConfig.headerHeight +
                  "px;\n        width: " +
                  _vm.widths[i] +
                  "px;\n      ",
                attrs: { align: _vm.aligns[i] },
                domProps: { innerHTML: _vm._s(headerItem) }
              })
            }),
            0
          )
        : _vm._e(),
      _vm._v(" "),
      _vm.mergedConfig
        ? _c(
            "div",
            {
              staticClass: "rows",
              style:
                "height: " +
                (_vm.height -
                  (_vm.header.length ? _vm.mergedConfig.headerHeight : 0)) +
                "px;"
            },
            _vm._l(_vm.rows, function(row, ri) {
              return _c(
                "div",
                {
                  key: "" + row.toString() + row.scroll,
                  staticClass: "row-item",
                  style:
                    "\n        height: " +
                    _vm.heights[ri] +
                    "px;\n        line-height: " +
                    _vm.heights[ri] +
                    "px;\n        background-color: " +
                    _vm.mergedConfig[
                      row.rowIndex % 2 === 0 ? "evenRowBGC" : "oddRowBGC"
                    ] +
                    ";\n      "
                },
                _vm._l(row.ceils, function(ceil, ci) {
                  return _c("div", {
                    key: "" + ceil + ri + ci,
                    staticClass: "ceil",
                    style: "width: " + _vm.widths[ci] + "px;",
                    attrs: { align: _vm.aligns[ci] },
                    domProps: { innerHTML: _vm._s(ceil) },
                    on: {
                      click: function($event) {
                        return _vm.emitEvent("click", ri, ci, row, ceil)
                      },
                      mouseenter: function($event) {
                        return _vm.handleHover(true, ri, ci, row, ceil)
                      },
                      mouseleave: function($event) {
                        return _vm.handleHover(false)
                      }
                    }
                  })
                }),
                0
              )
            }),
            0
          )
        : _vm._e()
    ])
  };
  var __vue_staticRenderFns__$A = [];
  __vue_render__$A._withStripped = true;

    /* style */
    const __vue_inject_styles__$A = function (inject) {
      if (!inject) return
      inject("data-v-26e19f4c_0", { source: ".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,WAAW;AACb;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;AACtB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,eAAe;EACf,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB","file":"main.vue","sourcesContent":[".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$A = undefined;
    /* module identifier */
    const __vue_module_identifier__$A = undefined;
    /* functional template */
    const __vue_is_functional_template__$A = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$A = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$A, staticRenderFns: __vue_staticRenderFns__$A },
      __vue_inject_styles__$A,
      __vue_script__$A,
      __vue_scope_id__$A,
      __vue_is_functional_template__$A,
      __vue_module_identifier__$A,
      false,
      createInjector,
      undefined,
      undefined
    );

  function scrollBoard (Vue) {
    Vue.component(__vue_component__$A.name, __vue_component__$A);
  }

  //
  var script$B = {
    name: 'DvScrollRankingBoard',
    mixins: [autoResize],
    props: {
      config: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      return {
        ref: 'scroll-ranking-board',
        defaultConfig: {
          /**
           * @description Board data
           * @type {Array<Object>}
           * @default data = []
           */
          data: [],

          /**
           * @description Row num
           * @type {Number}
           * @default rowNum = 5
           */
          rowNum: 5,

          /**
           * @description Scroll wait time
           * @type {Number}
           * @default waitTime = 2000
           */
          waitTime: 2000,

          /**
           * @description Carousel type
           * @type {String}
           * @default carousel = 'single'
           * @example carousel = 'single' | 'page'
           */
          carousel: 'single',

          /**
           * @description Value unit
           * @type {String}
           * @default unit = ''
           * @example unit = 'ton'
           */
          unit: '',

          /**
           * @description Auto sort by value
           * @type {Boolean}
           * @default sort = true
           */
          sort: true,

          /**
           * @description Value formatter
           * @type {Function}
           * @default valueFormatter = null
           */
          valueFormatter: null
        },
        mergedConfig: null,
        rowsData: [],
        rows: [],
        heights: [],
        animationIndex: 0,
        animationHandler: '',
        updater: 0
      };
    },

    watch: {
      config() {
        const {
          stopAnimation,
          calcData
        } = this;
        stopAnimation();
        calcData();
      }

    },
    methods: {
      afterAutoResizeMixinInit() {
        const {
          calcData
        } = this;
        calcData();
      },

      onResize() {
        const {
          mergedConfig,
          calcHeights
        } = this;
        if (!mergedConfig) return;
        calcHeights(true);
      },

      calcData() {
        const {
          mergeConfig,
          calcRowsData
        } = this;
        mergeConfig();
        calcRowsData();
        const {
          calcHeights
        } = this;
        calcHeights();
        const {
          animation
        } = this;
        animation(true);
      },

      mergeConfig() {
        let {
          config,
          defaultConfig
        } = this;
        this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
      },

      calcRowsData() {
        let {
          data,
          rowNum,
          sort
        } = this.mergedConfig;
        sort && data.sort(({
          value: a
        }, {
          value: b
        }) => {
          if (a > b) return -1;
          if (a < b) return 1;
          if (a === b) return 0;
        });
        const value = data.map(({
          value
        }) => value);
        const min = Math.min(...value) || 0; // abs of min

        const minAbs = Math.abs(min);
        const max = Math.max(...value) || 0; // abs of max
        const total = max + minAbs;
        data = data.map((row, i) => ({ ...row,
          ranking: i + 1,
          percent: (row.value + minAbs) / total * 100
        }));
        const rowLength = data.length;

        if (rowLength > rowNum && rowLength < 2 * rowNum) {
          data = [...data, ...data];
        }

        data = data.map((d, i) => ({ ...d,
          scroll: i
        }));
        this.rowsData = data;
        this.rows = data;
      },

      calcHeights(onresize = false) {
        const {
          height,
          mergedConfig
        } = this;
        const {
          rowNum,
          data
        } = mergedConfig;
        const avgHeight = height / rowNum;
        this.avgHeight = avgHeight;
        if (!onresize) this.heights = new Array(data.length).fill(avgHeight);
      },

      async animation(start = false) {
        let {
          avgHeight,
          animationIndex,
          mergedConfig,
          rowsData,
          animation,
          updater
        } = this;
        const {
          waitTime,
          carousel,
          rowNum
        } = mergedConfig;
        const rowLength = rowsData.length;
        if (rowNum >= rowLength) return;

        if (start) {
          await new Promise(resolve => setTimeout(resolve, waitTime));
          if (updater !== this.updater) return;
        }

        const animationNum = carousel === 'single' ? 1 : rowNum;
        let rows = rowsData.slice(animationIndex);
        rows.push(...rowsData.slice(0, animationIndex));
        this.rows = rows.slice(0, rowNum + 1);
        this.heights = new Array(rowLength).fill(avgHeight);
        await new Promise(resolve => setTimeout(resolve, 300));
        if (updater !== this.updater) return;
        this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0));
        animationIndex += animationNum;
        const back = animationIndex - rowLength;
        if (back >= 0) animationIndex = back;
        this.animationIndex = animationIndex;
        this.animationHandler = setTimeout(animation, waitTime - 300);
      },

      stopAnimation() {
        const {
          animationHandler,
          updater
        } = this;
        this.updater = (updater + 1) % 999999;
        if (!animationHandler) return;
        clearTimeout(animationHandler);
      }

    },

    destroyed() {
      const {
        stopAnimation
      } = this;
      stopAnimation();
    }

  };

  /* script */
  const __vue_script__$B = script$B;

  /* template */
  var __vue_render__$B = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c(
      "div",
      { ref: _vm.ref, staticClass: "dv-scroll-ranking-board" },
      _vm._l(_vm.rows, function(item, i) {
        return _c(
          "div",
          {
            key: item.toString() + item.scroll,
            staticClass: "row-item",
            style: "height: " + _vm.heights[i] + "px;"
          },
          [
            _c("div", { staticClass: "ranking-info" }, [
              _c("div", { staticClass: "rank" }, [
                _vm._v("No." + _vm._s(item.ranking))
              ]),
              _vm._v(" "),
              _c("div", {
                staticClass: "info-name",
                domProps: { innerHTML: _vm._s(item.name) }
              }),
              _vm._v(" "),
              _c("div", { staticClass: "ranking-value" }, [
                _vm._v(
                  _vm._s(
                    _vm.mergedConfig.valueFormatter
                      ? _vm.mergedConfig.valueFormatter(item)
                      : item.value + _vm.mergedConfig.unit
                  )
                )
              ])
            ]),
            _vm._v(" "),
            _c("div", { staticClass: "ranking-column" }, [
              _c(
                "div",
                {
                  staticClass: "inside-column",
                  style: "width: " + item.percent + "%;"
                },
                [_c("div", { staticClass: "shine" })]
              )
            ])
          ]
        )
      }),
      0
    )
  };
  var __vue_staticRenderFns__$B = [];
  __vue_render__$B._withStripped = true;

    /* style */
    const __vue_inject_styles__$B = function (inject) {
      if (!inject) return
      inject("data-v-f297519a_0", { source: ".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n80% {\n    left: 0%;\n    transform: translateX(-100%);\n}\n100% {\n    left: 100%;\n    transform: translateX(0%);\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,WAAW;EACX,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,WAAW;EACX,eAAe;AACjB;AACA;EACE,WAAW;EACX,cAAc;AAChB;AACA;EACE,OAAO;AACT;AACA;EACE,gDAAgD;EAChD,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,QAAQ;EACR,WAAW;EACX,WAAW;EACX,4BAA4B;EAC5B,wDAAwD;EACxD,kDAAkD;AACpD;AACA;AACE;IACE,QAAQ;IACR,4BAA4B;AAC9B;AACA;IACE,UAAU;IACV,yBAAyB;AAC3B;AACF","file":"main.vue","sourcesContent":[".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n  80% {\n    left: 0%;\n    transform: translateX(-100%);\n  }\n  100% {\n    left: 100%;\n    transform: translateX(0%);\n  }\n}\n"]}, media: undefined });

    };
    /* scoped */
    const __vue_scope_id__$B = undefined;
    /* module identifier */
    const __vue_module_identifier__$B = undefined;
    /* functional template */
    const __vue_is_functional_template__$B = false;
    /* style inject SSR */
    
    /* style inject shadow dom */
    

    
    const __vue_component__$B = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$B, staticRenderFns: __vue_staticRenderFns__$B },
      __vue_inject_styles__$B,
      __vue_script__$B,
      __vue_scope_id__$B,
      __vue_is_functional_template__$B,
      __vue_module_identifier__$B,
      false,
      createInjector,
      undefined,
      undefined
    );

  function scrollRankingBoard (Vue) {
    Vue.component(__vue_component__$B.name, __vue_component__$B);
  }

  /**
   * IMPORT COMPONENTS
   */
  /**
   * USE COMPONENTS
   */

  function datav (Vue) {
    Vue.use(fullScreenContainer);
    Vue.use(loading); // border box

    Vue.use(borderBox1);
    Vue.use(borderBox2);
    Vue.use(borderBox3);
    Vue.use(borderBox4);
    Vue.use(borderBox5);
    Vue.use(borderBox6);
    Vue.use(borderBox7);
    Vue.use(borderBox8);
    Vue.use(borderBox9);
    Vue.use(borderBox10);
    Vue.use(borderBox11);
    Vue.use(borderBox12);
    Vue.use(borderBox13); // decoration

    Vue.use(decoration1);
    Vue.use(decoration2);
    Vue.use(decoration3);
    Vue.use(decoration4);
    Vue.use(decoration5);
    Vue.use(decoration6);
    Vue.use(decoration7);
    Vue.use(decoration8);
    Vue.use(decoration9);
    Vue.use(decoration10);
    Vue.use(decoration11);
    Vue.use(decoration12); // charts

    Vue.use(charts);
    Vue.use(activeRingChart);
    Vue.use(capsuleChart);
    Vue.use(waterLevelPond);
    Vue.use(percentPond);
    Vue.use(flylineChart);
    Vue.use(flylineChartEnhanced);
    Vue.use(conicalColumnChart);
    Vue.use(digitalFlop);
    Vue.use(scrollBoard);
    Vue.use(scrollRankingBoard);
  }

  Vue.use(datav);

})));


================================================
FILE: dist/datav.min.vue.js
================================================
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):t((e=e||self).Vue)}(this,(function(e){"use strict";function t(e,t){return 1===arguments.length?parseInt(Math.random()*e+1,10):parseInt(Math.random()*(t-e+1)+e,10)}function n(e,t){const n=Math.abs(e[0]-t[0]),r=Math.abs(e[1]-t[1]);return Math.sqrt(n*n+r*r)}function r(e){return(e?"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx":"xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx").replace(/[xy]/g,(function(e){const t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}))}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var i={data:()=>({dom:"",width:0,height:0,debounceInitWHFun:"",domObserver:""}),methods:{async autoResizeMixinInit(){const{initWH:e,getDebounceInitWHFun:t,bindDomResizeCallback:n,afterAutoResizeMixinInit:r}=this;await e(!1),t(),n(),"function"==typeof r&&r()},initWH(e=!0){const{$nextTick:t,$refs:n,ref:r,onResize:i}=this;return new Promise(o=>{t(t=>{const a=this.dom=n[r];this.width=a?a.clientWidth:0,this.height=a?a.clientHeight:0,a?this.width&&this.height||console.warn("DataV: Component width or height is 0px, rendering abnormality may occur!"):console.warn("DataV: Failed to get dom node, component rendering may be abnormal!"),"function"==typeof i&&e&&i(),o()})})},getDebounceInitWHFun(){const{initWH:e}=this;this.debounceInitWHFun=function(e,t){let n;return function(){clearTimeout(n);const[r,i]=[this,arguments];n=setTimeout(()=>{t.apply(r,i)},e)}}(100,e)},bindDomResizeCallback(){const{dom:e,debounceInitWHFun:t}=this;this.domObserver=function(e,t){const n=new(window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver)(t);return n.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),n}(e,t),window.addEventListener("resize",t)},unbindDomResizeCallback(){let{domObserver:e,debounceInitWHFun:t}=this;e&&(e.disconnect(),e.takeRecords(),e=null,window.removeEventListener("resize",t))}},mounted(){const{autoResizeMixinInit:e}=this;e()},beforeDestroy(){const{unbindDomResizeCallback:e}=this;e()}},o={name:"DvFullScreenContainer",mixins:[i],data:()=>({ref:"full-screen-container",allWidth:0,scale:0,datavRoot:"",ready:!1}),methods:{afterAutoResizeMixinInit(){const{initConfig:e,setAppScale:t}=this;e(),t(),this.ready=!0},initConfig(){const{dom:e}=this,{width:t,height:n}=screen;this.allWidth=t,e.style.width=t+"px",e.style.height=n+"px"},setAppScale(){const{allWidth:e,dom:t}=this,n=document.body.clientWidth;t.style.transform=`scale(${n/e})`},onResize(){const{setAppScale:e}=this;e()}}};function a(e,t,n,r,i,o,a,s,l,d){"boolean"!=typeof a&&(l=s,s=a,a=!1);const c="function"==typeof n?n.options:n;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):t&&(u=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(c.functional){const e=c.render;c.render=function(t,n){return u.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return n}const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function l(e){return(e,t)=>function(e,t){const n=s?t.media||"default":e,r=c[n]||(c[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===d&&(d=document.head||document.getElementsByTagName("head")[0]),d.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(n),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,t=document.createTextNode(n),i=r.element.childNodes;i[e]&&r.element.removeChild(i[e]),i.length?r.element.insertBefore(t,i[e]):r.element.appendChild(t)}}}(e,t)}let d;const c={};const u=o;var h=function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:this.ref,attrs:{id:"dv-full-screen-container"}},[this.ready?[this._t("default")]:this._e()],2)};h._withStripped=!0;const f=a({render:h,staticRenderFns:[]},(function(e){e&&e("data-v-2da16e2c_0",{source:"#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,0BAA0B;EAC1B,YAAY;AACd",file:"main.vue",sourcesContent:["#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n"]},media:void 0})}),u,void 0,!1,void 0,!1,l,void 0,void 0);function p(e){e.component(f.name,f)}const g={name:"DvLoading"};var v=function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"dv-loading"},[t("svg",{attrs:{width:"50px",height:"50px"}},[t("circle",{attrs:{cx:"25",cy:"25",r:"20",fill:"transparent","stroke-width":"3","stroke-dasharray":"31.415, 31.415",stroke:"#02bcfe","stroke-linecap":"round"}},[t("animateTransform",{attrs:{attributeName:"transform",type:"rotate",values:"0, 25 25;360, 25 25",dur:"1.5s",repeatCount:"indefinite"}}),this._v(" "),t("animate",{attrs:{attributeName:"stroke",values:"#02bcfe;#3be6cb;#02bcfe",dur:"3s",repeatCount:"indefinite"}})],1),this._v(" "),t("circle",{attrs:{cx:"25",cy:"25",r:"10",fill:"transparent","stroke-width":"3","stroke-dasharray":"15.7, 15.7",stroke:"#3be6cb","stroke-linecap":"round"}},[t("animateTransform",{attrs:{attributeName:"transform",type:"rotate",values:"360, 25 25;0, 25 25",dur:"1.5s",repeatCount:"indefinite"}}),this._v(" "),t("animate",{attrs:{attributeName:"stroke",values:"#3be6cb;#02bcfe;#3be6cb",dur:"3s",repeatCount:"indefinite"}})],1)]),this._v(" "),t("div",{staticClass:"loading-tip"},[this._t("default")],2)])};v._withStripped=!0;const m=a({render:v,staticRenderFns:[]},(function(e){e&&e("data-v-c8b3d976_0",{source:".dv-loading {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.dv-loading .loading-tip {\n  font-size: 15px;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,mBAAmB;AACrB;AACA;EACE,eAAe;AACjB",file:"main.vue",sourcesContent:[".dv-loading {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.dv-loading .loading-tip {\n  font-size: 15px;\n}\n"]},media:void 0})}),g,void 0,!1,void 0,!1,l,void 0,void 0);function A(e){e.component(m.name,m)}function C(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function b(e,t){return e(t={exports:{}},t.exports),t.exports}var y=b((function(e){e.exports=function(e){return e&&e.__esModule?e:{default:e}}}));C(y);var x=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r};var w=function(e){if(Array.isArray(e))return x(e)};var k=function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)};var E=function(e,t){if(e){if("string"==typeof e)return x(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?x(e,t):void 0}};var B=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")};var P=function(e){return w(e)||k(e)||E(e)||B()},_=b((function(e){function t(n){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?e.exports=t=function(e){return typeof e}:e.exports=t=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t(n)}e.exports=t}));var S=function(e){if(Array.isArray(e))return e};var O=function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var n=[],r=!0,i=!1,o=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){i=!0,o=e}finally{try{r||null==s.return||s.return()}finally{if(i)throw o}}return n}};var I=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")};var W=function(e,t){return S(e)||O(e,t)||E(e,t)||I()},L=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.deepClone=h,t.eliminateBlur=f,t.checkPointIsInCircle=p,t.getTwoPointDistance=g,t.checkPointIsInPolygon=v,t.checkPointIsInSector=m,t.checkPointIsNearPolyline=C,t.checkPointIsInRect=function(e,t,n,i,o){var a=(0,r.default)(e,2),s=a[0],l=a[1];return!(s<t)&&(!(l<n)&&(!(s>t+i)&&!(l>n+o)))},t.getRotatePointPos=b,t.getScalePointPos=x,t.getTranslatePointPos=w,t.getDistanceBetweenPointAndLine=k,t.getCircleRadianPoint=E,t.getRegularPolygonPoints=B,t.default=void 0;var n=y(P),r=y(W),i=y(_),o=Math.abs,a=Math.sqrt,s=Math.sin,l=Math.cos,d=Math.max,c=Math.min,u=Math.PI;function h(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!e)return e;var n=JSON.parse,r=JSON.stringify;if(!t)return n(r(e));var o=e instanceof Array?[]:{};if(e&&"object"===(0,i.default)(e))for(var a in e)e.hasOwnProperty(a)&&(e[a]&&"object"===(0,i.default)(e[a])?o[a]=h(e[a],!0):o[a]=e[a]);return o}function f(e){return e.map((function(e){var t=(0,r.default)(e,2),n=t[0],i=t[1];return[parseInt(n)+.5,parseInt(i)+.5]}))}function p(e,t,n,r){return g(e,[t,n])<=r}function g(e,t){var n=(0,r.default)(e,2),i=n[0],s=n[1],l=(0,r.default)(t,2),d=l[0],c=l[1],u=o(i-d),h=o(s-c);return a(u*u+h*h)}function v(e,t){for(var n=0,i=(0,r.default)(e,2),o=i[0],a=i[1],s=t.length,l=1,u=t[0];l<=s;l++){var h=t[l%s];if(o>c(u[0],h[0])&&o<=d(u[0],h[0])&&a<=d(u[1],h[1])&&u[0]!==h[0]){var f=(o-u[0])*(h[1]-u[1])/(h[0]-u[0])+u[1];(u[1]===h[1]||a<=f)&&n++}u=h}return n%2==1}function m(e,t,n,i,o,a,s){if(!e)return!1;if(g(e,[t,n])>i)return!1;if(!s){var l=h([a,o]),d=(0,r.default)(l,2);o=d[0],a=d[1]}var c=o>a;if(c){var f=[a,o];o=f[0],a=f[1]}var p=a-o;if(p>=2*u)return!0;var v=(0,r.default)(e,2),m=v[0],C=v[1],b=E(t,n,i,o),y=(0,r.default)(b,2),x=y[0],w=y[1],k=E(t,n,i,a),B=(0,r.default)(k,2),P=[m-t,C-n],_=[x-t,w-n],S=[B[0]-t,B[1]-n],O=p>u;if(O){var I=h([S,_]),W=(0,r.default)(I,2);_=W[0],S=W[1]}var L=A(_,P)&&!A(S,P);return O&&(L=!L),c&&(L=!L),L}function A(e,t){var n=(0,r.default)(e,2),i=n[0],o=n[1],a=(0,r.default)(t,2);return-o*a[0]+i*a[1]>0}function C(e,t,i){var o=i/2,a=t.map((function(e){var t=(0,r.default)(e,2);return[t[0],t[1]-o]})),s=t.map((function(e){var t=(0,r.default)(e,2);return[t[0],t[1]+o]}));return v(e,[].concat((0,n.default)(a),(0,n.default)(s.reverse())))}function b(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1?arguments[1]:void 0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0];if(!t)return!1;if(e%360==0)return t;var i=(0,r.default)(t,2),o=i[0],a=i[1],d=(0,r.default)(n,2),c=d[0],h=d[1];return[(o-c)*l(e*=u/180)-(a-h)*s(e)+c,(o-c)*s(e)+(a-h)*l(e)+h]}function x(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[1,1],t=arguments.length>1?arguments[1]:void 0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0];if(!t)return!1;if(1===e)return t;var i=(0,r.default)(t,2),o=i[0],a=i[1],s=(0,r.default)(n,2),l=s[0],d=s[1],c=(0,r.default)(e,2),u=c[0],h=c[1],f=o-l,p=a-d;return[f*u+l,p*h+d]}function w(e,t){if(!e||!t)return!1;var n=(0,r.default)(t,2),i=n[0],o=n[1],a=(0,r.default)(e,2);return[i+a[0],o+a[1]]}function k(e,t,n){if(!e||!t||!n)return!1;var i=(0,r.default)(e,2),s=i[0],l=i[1],d=(0,r.default)(t,2),c=d[0],u=d[1],h=(0,r.default)(n,2),f=h[0],p=h[1],g=p-u,v=c-f;return o(g*s+v*l+(u*(f-c)-c*(p-u)))/a(g*g+v*v)}function E(e,t,n,r){return[e+l(r)*n,t+s(r)*n]}function B(e,t,n,r){var i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:-.5*u,o=2*u/r,a=new Array(r).fill("").map((function(e,t){return t*o+i}));return a.map((function(r){return E(e,t,n,r)}))}var S={deepClone:h,eliminateBlur:f,checkPointIsInCircle:p,checkPointIsInPolygon:v,checkPointIsInSector:m,checkPointIsNearPolyline:C,getTwoPointDistance:g,getRotatePointPos:b,getScalePointPos:x,getTranslatePointPos:w,getCircleRadianPoint:E,getRegularPolygonPoints:B,getDistanceBetweenPointAndLine:k};t.default=S}));C(L);var j=L.deepClone,M=(L.eliminateBlur,L.checkPointIsInCircle,L.getTwoPointDistance,L.checkPointIsInPolygon,L.checkPointIsInSector,L.checkPointIsNearPolyline,L.checkPointIsInRect,L.getRotatePointPos,L.getScalePointPos,L.getTranslatePointPos,L.getDistanceBetweenPointAndLine,L.getCircleRadianPoint),F=(L.getRegularPolygonPoints,b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.filterNonNumber=i,t.deepMerge=o,t.mulAdd=a,t.mergeSameStackData=function(e,t){var r=e.stack;if(!r)return(0,n.default)(e.data);var i=t.filter((function(e){return e.stack===r})),o=i.findIndex((function(t){return t.data===e.data})),s=i.splice(0,o+1).map((function(e){return e.data})),l=s[0].length;return new Array(l).fill(0).map((function(e,t){return a(s.map((function(e){return e[t]})))}))},t.getTwoPointDistance=s,t.getLinearGradientColor=function(e,t,r,i){if(!(e&&t&&r&&i.length))return;var o=i;"string"==typeof o&&(o=[i,i]);var a=e.createLinearGradient.apply(e,(0,n.default)(t).concat((0,n.default)(r))),s=1/(o.length-1);return o.forEach((function(e,t){return a.addColorStop(s*t,e)})),a},t.getPolylineLength=function(e){return a(new Array(e.length-1).fill(0).map((function(t,n){return[e[n],e[n+1]]})).map((function(e){return s.apply(void 0,(0,n.default)(e))})))},t.getPointToLineDistance=function(e,t,n){var r=s(e,t),i=s(e,n),o=s(t,n);return.5*Math.sqrt((r+i+o)*(r+i-o)*(r+o-i)*(i+o-r))/o},t.initNeedSeries=function(e,t,n){return(e=(e=e.filter((function(e){return e.type===n}))).map((function(e){return o((0,L.deepClone)(t,!0),e)}))).filter((function(e){return e.show}))},t.radianToAngle=function(e){return e/Math.PI*180};var n=y(P),r=y(_);function i(e){return e.filter((function(e){return"number"==typeof e}))}function o(e,t){for(var n in t)e[n]&&"object"===(0,r.default)(e[n])?o(e[n],t[n]):"object"!==(0,r.default)(t[n])?e[n]=t[n]:e[n]=(0,L.deepClone)(t[n],!0);return e}function a(e){return(e=i(e)).reduce((function(e,t){return e+t}),0)}function s(e,t){var n=Math.abs(e[0]-t[0]),r=Math.abs(e[1]-t[1]);return Math.sqrt(n*n+r*r)}})));C(F);F.filterNonNumber;var D=F.deepMerge,R=(F.mulAdd,F.mergeSameStackData,F.getTwoPointDistance,F.getLinearGradientColor,F.getPolylineLength);F.getPointToLineDistance,F.initNeedSeries,F.radianToAngle;const G={name:"DvBorderBox1",mixins:[i],props:{color:{type:Array,default:()=>[]},backgroundColor:{type:String,default:"transparent"}},data:()=>({ref:"border-box-1",border:["left-top","right-top","left-bottom","right-bottom"],defaultColor:["#4fd2dd","#235fa7"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var z=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-border-box-1"},[n("svg",{staticClass:"border",attrs:{width:e.width,height:e.height}},[n("polygon",{attrs:{fill:e.backgroundColor,points:"10, 27 10, "+(e.height-27)+" 13, "+(e.height-24)+" 13, "+(e.height-21)+" 24, "+(e.height-11)+"\n    38, "+(e.height-11)+" 41, "+(e.height-8)+" 73, "+(e.height-8)+" 75, "+(e.height-10)+" 81, "+(e.height-10)+"\n    85, "+(e.height-6)+" "+(e.width-85)+", "+(e.height-6)+" "+(e.width-81)+", "+(e.height-10)+" "+(e.width-75)+", "+(e.height-10)+"\n    "+(e.width-73)+", "+(e.height-8)+" "+(e.width-41)+", "+(e.height-8)+" "+(e.width-38)+", "+(e.height-11)+"\n    "+(e.width-24)+", "+(e.height-11)+" "+(e.width-13)+", "+(e.height-21)+" "+(e.width-13)+", "+(e.height-24)+"\n    "+(e.width-10)+", "+(e.height-27)+" "+(e.width-10)+", 27 "+(e.width-13)+", 25 "+(e.width-13)+", 21\n    "+(e.width-24)+", 11 "+(e.width-38)+", 11 "+(e.width-41)+", 8 "+(e.width-73)+", 8 "+(e.width-75)+", 10\n    "+(e.width-81)+", 10 "+(e.width-85)+", 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24"}})]),e._v(" "),e._l(e.border,(function(t){return n("svg",{key:t,class:t+" border",attrs:{width:"150px",height:"150px"}},[n("polygon",{attrs:{fill:e.mergedColor[0],points:"6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"}},[n("animate",{attrs:{attributeName:"fill",values:e.mergedColor[0]+";"+e.mergedColor[1]+";"+e.mergedColor[0],dur:"0.5s",begin:"0s",repeatCount:"indefinite"}})]),e._v(" "),n("polygon",{attrs:{fill:e.mergedColor[1],points:"27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"}},[n("animate",{attrs:{attributeName:"fill",values:e.mergedColor[1]+";"+e.mergedColor[0]+";"+e.mergedColor[1],dur:"0.5s",begin:"0s",repeatCount:"indefinite"}})]),e._v(" "),n("polygon",{attrs:{fill:e.mergedColor[0],points:"9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"}},[n("animate",{attrs:{attributeName:"fill",values:e.mergedColor[0]+";"+e.mergedColor[1]+";transparent",dur:"1s",begin:"0s",repeatCount:"indefinite"}})])])})),e._v(" "),n("div",{staticClass:"border-box-content"},[e._t("default")],2)],2)};z._withStripped=!0;const T=a({render:z,staticRenderFns:[]},(function(e){e&&e("data-v-5d85361d_0",{source:".dv-border-box-1 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-1 .border {\n  position: absolute;\n  display: block;\n}\n.dv-border-box-1 .right-top {\n  right: 0px;\n  transform: rotateY(180deg);\n}\n.dv-border-box-1 .left-bottom {\n  bottom: 0px;\n  transform: rotateX(180deg);\n}\n.dv-border-box-1 .right-bottom {\n  right: 0px;\n  bottom: 0px;\n  transform: rotateX(180deg) rotateY(180deg);\n}\n.dv-border-box-1 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,cAAc;AAChB;AACA;EACE,UAAU;EACV,0BAA0B;AAC5B;AACA;EACE,WAAW;EACX,0BAA0B;AAC5B;AACA;EACE,UAAU;EACV,WAAW;EACX,0CAA0C;AAC5C;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-border-box-1 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-1 .border {\n  position: absolute;\n  display: block;\n}\n.dv-border-box-1 .right-top {\n  right: 0px;\n  transform: rotateY(180deg);\n}\n.dv-border-box-1 .left-bottom {\n  bottom: 0px;\n  transform: rotateX(180deg);\n}\n.dv-border-box-1 .right-bottom {\n  right: 0px;\n  bottom: 0px;\n  transform: rotateX(180deg) rotateY(180deg);\n}\n.dv-border-box-1 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),G,void 0,!1,void 0,!1,l,void 0,void 0);function Y(e){e.component(T.name,T)}const N={name:"DvBorderBox2",mixins:[i],props:{color:{type:Array,default:()=>[]},backgroundColor:{type:String,default:"transparent"}},data:()=>({ref:"border-box-2",defaultColor:["#fff","rgba(255, 255, 255, 0.6)"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var X=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-border-box-2"},[n("svg",{staticClass:"dv-border-svg-container",attrs:{width:e.width,height:e.height}},[n("polygon",{attrs:{fill:e.backgroundColor,points:"\n      7, 7 "+(e.width-7)+", 7 "+(e.width-7)+", "+(e.height-7)+" 7, "+(e.height-7)+"\n    "}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],points:"2, 2 "+(e.width-2)+" ,2 "+(e.width-2)+", "+(e.height-2)+" 2, "+(e.height-2)+" 2, 2"}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[1],points:"6, 6 "+(e.width-6)+", 6 "+(e.width-6)+", "+(e.height-6)+" 6, "+(e.height-6)+" 6, 6"}}),e._v(" "),n("circle",{attrs:{fill:e.mergedColor[0],cx:"11",cy:"11",r:"1"}}),e._v(" "),n("circle",{attrs:{fill:e.mergedColor[0],cx:e.width-11,cy:"11",r:"1"}}),e._v(" "),n("circle",{attrs:{fill:e.mergedColor[0],cx:e.width-11,cy:e.height-11,r:"1"}}),e._v(" "),n("circle",{attrs:{fill:e.mergedColor[0],cx:"11",cy:e.height-11,r:"1"}})]),e._v(" "),n("div",{staticClass:"border-box-content"},[e._t("default")],2)])};X._withStripped=!0;const $=a({render:X,staticRenderFns:[]},(function(e){e&&e("data-v-d5c64680_0",{source:".dv-border-box-2 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-2 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-2 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-2 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;EACV,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-border-box-2 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-2 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-2 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-2 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),N,void 0,!1,void 0,!1,l,void 0,void 0);function H(e){e.component($.name,$)}const Q={name:"DvBorderBox3",mixins:[i],props:{color:{type:Array,default:()=>[]},backgroundColor:{type:String,default:"transparent"}},data:()=>({ref:"border-box-3",defaultColor:["#2862b7","#2862b7"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var U=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-border-box-3"},[n("svg",{staticClass:"dv-border-svg-container",attrs:{width:e.width,height:e.height}},[n("polygon",{attrs:{fill:e.backgroundColor,points:"\n      23, 23 "+(e.width-24)+", 23 "+(e.width-24)+", "+(e.height-24)+" 23, "+(e.height-24)+"\n    "}}),e._v(" "),n("polyline",{staticClass:"dv-bb3-line1",attrs:{stroke:e.mergedColor[0],points:"4, 4 "+(e.width-22)+" ,4 "+(e.width-22)+", "+(e.height-22)+" 4, "+(e.height-22)+" 4, 4"}}),e._v(" "),n("polyline",{staticClass:"dv-bb3-line2",attrs:{stroke:e.mergedColor[1],points:"10, 10 "+(e.width-16)+", 10 "+(e.width-16)+", "+(e.height-16)+" 10, "+(e.height-16)+" 10, 10"}}),e._v(" "),n("polyline",{staticClass:"dv-bb3-line2",attrs:{stroke:e.mergedColor[1],points:"16, 16 "+(e.width-10)+", 16 "+(e.width-10)+", "+(e.height-10)+" 16, "+(e.height-10)+" 16, 16"}}),e._v(" "),n("polyline",{staticClass:"dv-bb3-line2",attrs:{stroke:e.mergedColor[1],points:"22, 22 "+(e.width-4)+", 22 "+(e.width-4)+", "+(e.height-4)+" 22, "+(e.height-4)+" 22, 22"}})]),e._v(" "),n("div",{staticClass:"border-box-content"},[e._t("default")],2)])};U._withStripped=!0;const V=a({render:U,staticRenderFns:[]},(function(e){e&&e("data-v-8dbfb74c_0",{source:".dv-border-box-3 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-3 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-3 .dv-border-svg-container > polyline {\n  fill: none;\n}\n.dv-border-box-3 .dv-bb3-line1 {\n  stroke-width: 3;\n}\n.dv-border-box-3 .dv-bb3-line2 {\n  stroke-width: 1;\n}\n.dv-border-box-3 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;AACZ;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-border-box-3 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-3 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-3 .dv-border-svg-container > polyline {\n  fill: none;\n}\n.dv-border-box-3 .dv-bb3-line1 {\n  stroke-width: 3;\n}\n.dv-border-box-3 .dv-bb3-line2 {\n  stroke-width: 1;\n}\n.dv-border-box-3 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),Q,void 0,!1,void 0,!1,l,void 0,void 0);function q(e){e.component(V.name,V)}const Z={name:"DvBorderBox4",mixins:[i],props:{color:{type:Array,default:()=>[]},reverse:{type:Boolean,default:!1},backgroundColor:{type:String,default:"transparent"}},data:()=>({ref:"border-box-4",defaultColor:["red","rgba(0,0,255,0.8)"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var K=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-border-box-4"},[n("svg",{class:"dv-border-svg-container "+(e.reverse&&"dv-reverse"),attrs:{width:e.width,height:e.height}},[n("polygon",{attrs:{fill:e.backgroundColor,points:"\n      "+(e.width-15)+", 22 170, 22 150, 7 40, 7 28, 21 32, 24\n      16, 42 16, "+(e.height-32)+" 41, "+(e.height-7)+" "+(e.width-15)+", "+(e.height-7)+"\n    "}}),e._v(" "),n("polyline",{staticClass:"dv-bb4-line-1",attrs:{stroke:e.mergedColor[0],points:"145, "+(e.height-5)+" 40, "+(e.height-5)+" 10, "+(e.height-35)+"\n        10, 40 40, 5 150, 5 170, 20 "+(e.width-15)+", 20"}}),e._v(" "),n("polyline",{staticClass:"dv-bb4-line-2",attrs:{stroke:e.mergedColor[1],points:"245, "+(e.height-1)+" 36, "+(e.height-1)+" 14, "+(e.height-23)+"\n        14, "+(e.height-100)}}),e._v(" "),n("polyline",{staticClass:"dv-bb4-line-3",attrs:{stroke:e.mergedColor[0],points:"7, "+(e.height-40)+" 7, "+(e.height-75)}}),e._v(" "),n("polyline",{staticClass:"dv-bb4-line-4",attrs:{stroke:e.mergedColor[0],points:"28, 24 13, 41 13, 64"}}),e._v(" "),n("polyline",{staticClass:"dv-bb4-line-5",attrs:{stroke:e.mergedColor[0],points:"5, 45 5, 140"}}),e._v(" "),n("polyline",{staticClass:"dv-bb4-line-6",attrs:{stroke:e.mergedColor[1],points:"14, 75 14, 180"}}),e._v(" "),n("polyline",{staticClass:"dv-bb4-line-7",attrs:{stroke:e.mergedColor[1],points:"55, 11 147, 11 167, 26 250, 26"}}),e._v(" "),n("polyline",{staticClass:"dv-bb4-line-8",attrs:{stroke:e.mergedColor[1],points:"158, 5 173, 16"}}),e._v(" "),n("polyline",{staticClass:"dv-bb4-line-9",attrs:{stroke:e.mergedColor[0],points:"200, 17 "+(e.width-10)+", 17"}}),e._v(" "),n("polyline",{staticClass:"dv-bb4-line-10",attrs:{stroke:e.mergedColor[1],points:"385, 17 "+(e.width-10)+", 17"}})]),e._v(" "),n("div",{staticClass:"border-box-content"},[e._t("default")],2)])};K._withStripped=!0;const J=a({render:K,staticRenderFns:[]},(function(e){e&&e("data-v-229480d1_0",{source:".dv-border-box-4 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-4 .dv-reverse {\n  transform: rotate(180deg);\n}\n.dv-border-box-4 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-4 .dv-border-svg-container > polyline {\n  fill: none;\n}\n.dv-border-box-4 .sw1 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .sw3 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-1 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-2 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-3 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-4 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-5 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-6 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-7 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-8 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-9 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n  stroke-dasharray: 100 250;\n}\n.dv-border-box-4 .dv-bb4-line-10 {\n  stroke-width: 1;\n  stroke-dasharray: 80 270;\n}\n.dv-border-box-4 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,yBAAyB;AAC3B;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;AACZ;AACA;EACE,eAAe;AACjB;AACA;EACE,iBAAiB;EACjB,qBAAqB;AACvB;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,iBAAiB;EACjB,qBAAqB;AACvB;AACA;EACE,iBAAiB;EACjB,qBAAqB;AACvB;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,iBAAiB;EACjB,qBAAqB;AACvB;AACA;EACE,iBAAiB;EACjB,qBAAqB;EACrB,yBAAyB;AAC3B;AACA;EACE,eAAe;EACf,wBAAwB;AAC1B;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-border-box-4 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-4 .dv-reverse {\n  transform: rotate(180deg);\n}\n.dv-border-box-4 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-4 .dv-border-svg-container > polyline {\n  fill: none;\n}\n.dv-border-box-4 .sw1 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .sw3 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-1 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-2 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-3 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-4 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-5 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-6 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-7 {\n  stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-8 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-9 {\n  stroke-width: 3px;\n  stroke-linecap: round;\n  stroke-dasharray: 100 250;\n}\n.dv-border-box-4 .dv-bb4-line-10 {\n  stroke-width: 1;\n  stroke-dasharray: 80 270;\n}\n.dv-border-box-4 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),Z,void 0,!1,void 0,!1,l,void 0,void 0);function ee(e){e.component(J.name,J)}const te={name:"DvBorderBox5",mixins:[i],props:{color:{type:Array,default:()=>[]},reverse:{type:Boolean,default:!1},backgroundColor:{type:String,default:"transparent"}},data:()=>({ref:"border-box-5",defaultColor:["rgba(255, 255, 255, 0.35)","rgba(255, 255, 255, 0.20)"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var ne=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-border-box-5"},[n("svg",{class:"dv-border-svg-container  "+(e.reverse&&"dv-reverse"),attrs:{width:e.width,height:e.height}},[n("polygon",{attrs:{fill:e.backgroundColor,points:"\n      10, 22 "+(e.width-22)+", 22 "+(e.width-22)+", "+(e.height-86)+" "+(e.width-84)+", "+(e.height-24)+" 10, "+(e.height-24)+"\n    "}}),e._v(" "),n("polyline",{staticClass:"dv-bb5-line-1",attrs:{stroke:e.mergedColor[0],points:"8, 5 "+(e.width-5)+", 5 "+(e.width-5)+", "+(e.height-100)+"\n        "+(e.width-100)+", "+(e.height-5)+" 8, "+(e.height-5)+" 8, 5"}}),e._v(" "),n("polyline",{staticClass:"dv-bb5-line-2",attrs:{stroke:e.mergedColor[1],points:"3, 5 "+(e.width-20)+", 5 "+(e.width-20)+", "+(e.height-60)+"\n        "+(e.width-74)+", "+(e.height-5)+" 3, "+(e.height-5)+" 3, 5"}}),e._v(" "),n("polyline",{staticClass:"dv-bb5-line-3",attrs:{stroke:e.mergedColor[1],points:"50, 13 "+(e.width-35)+", 13"}}),e._v(" "),n("polyline",{staticClass:"dv-bb5-line-4",attrs:{stroke:e.mergedColor[1],points:"15, 20 "+(e.width-35)+", 20"}}),e._v(" "),n("polyline",{staticClass:"dv-bb5-line-5",attrs:{stroke:e.mergedColor[1],points:"15, "+(e.height-20)+" "+(e.width-110)+", "+(e.height-20)}}),e._v(" "),n("polyline",{staticClass:"dv-bb5-line-6",attrs:{stroke:e.mergedColor[1],points:"15, "+(e.height-13)+" "+(e.width-110)+", "+(e.height-13)}})]),e._v(" "),n("div",{staticClass:"border-box-content"},[e._t("default")],2)])};ne._withStripped=!0;const re=a({render:ne,staticRenderFns:[]},(function(e){e&&e("data-v-5e711d00_0",{source:".dv-border-box-5 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-5 .dv-reverse {\n  transform: rotate(180deg);\n}\n.dv-border-box-5 .dv-border-svg-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-5 .dv-border-svg-container > polyline {\n  fill: none;\n}\n.dv-border-box-5 .dv-bb5-line-1,\n.dv-border-box-5 .dv-bb5-line-2 {\n  stroke-width: 1;\n}\n.dv-border-box-5 .dv-bb5-line-3,\n.dv-border-box-5 .dv-bb5-line-6 {\n  stroke-width: 5;\n}\n.dv-border-box-5 .dv-bb5-line-4,\n.dv-border-box-5 .dv-bb5-line-5 {\n  stroke-width: 2;\n}\n.dv-border-box-5 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,yBAAyB;AAC3B;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;AACd;AACA;EACE,UAAU;AACZ;AACA;;EAEE,eAAe;AACjB;AACA;;EAEE,eAAe;AACjB;AACA;;EAEE,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-border-box-5 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-5 .dv-reverse {\n  transform: rotate(180deg);\n}\n.dv-border-box-5 .dv-border-svg-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-5 .dv-border-svg-container > polyline {\n  fill: none;\n}\n.dv-border-box-5 .dv-bb5-line-1,\n.dv-border-box-5 .dv-bb5-line-2 {\n  stroke-width: 1;\n}\n.dv-border-box-5 .dv-bb5-line-3,\n.dv-border-box-5 .dv-bb5-line-6 {\n  stroke-width: 5;\n}\n.dv-border-box-5 .dv-bb5-line-4,\n.dv-border-box-5 .dv-bb5-line-5 {\n  stroke-width: 2;\n}\n.dv-border-box-5 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),te,void 0,!1,void 0,!1,l,void 0,void 0);function ie(e){e.component(re.name,re)}const oe={name:"DvBorderBox6",mixins:[i],props:{color:{type:Array,default:()=>[]},backgroundColor:{type:String,default:"transparent"}},data:()=>({ref:"border-box-6",defaultColor:["rgba(255, 255, 255, 0.35)","gray"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var ae=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-border-box-6"},[n("svg",{staticClass:"dv-border-svg-container",attrs:{width:e.width,height:e.height}},[n("polygon",{attrs:{fill:e.backgroundColor,points:"\n      9, 7 "+(e.width-9)+", 7 "+(e.width-9)+", "+(e.height-7)+" 9, "+(e.height-7)+"\n    "}}),e._v(" "),n("circle",{attrs:{fill:e.mergedColor[1],cx:"5",cy:"5",r:"2"}}),e._v(" "),n("circle",{attrs:{fill:e.mergedColor[1],cx:e.width-5,cy:"5",r:"2"}}),e._v(" "),n("circle",{attrs:{fill:e.mergedColor[1],cx:e.width-5,cy:e.height-5,r:"2"}}),e._v(" "),n("circle",{attrs:{fill:e.mergedColor[1],cx:"5",cy:e.height-5,r:"2"}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],points:"10, 4 "+(e.width-10)+", 4"}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],points:"10, "+(e.height-4)+" "+(e.width-10)+", "+(e.height-4)}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],points:"5, 70 5, "+(e.height-70)}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],points:e.width-5+", 70 "+(e.width-5)+", "+(e.height-70)}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],points:"3, 10, 3, 50"}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],points:"7, 30 7, 80"}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],points:e.width-3+", 10 "+(e.width-3)+", 50"}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],points:e.width-7+", 30 "+(e.width-7)+", 80"}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],points:"3, "+(e.height-10)+" 3, "+(e.height-50)}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],points:"7, "+(e.height-30)+" 7, "+(e.height-80)}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],points:e.width-3+", "+(e.height-10)+" "+(e.width-3)+", "+(e.height-50)}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],points:e.width-7+", "+(e.height-30)+" "+(e.width-7)+", "+(e.height-80)}})]),e._v(" "),n("div",{staticClass:"border-box-content"},[e._t("default")],2)])};ae._withStripped=!0;const se=a({render:ae,staticRenderFns:[]},(function(e){e&&e("data-v-715598fc_0",{source:".dv-border-box-6 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-6 .dv-border-svg-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-6 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-6 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;AACd;AACA;EACE,UAAU;EACV,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-border-box-6 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-6 .dv-border-svg-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-6 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-6 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),oe,void 0,!1,void 0,!1,l,void 0,void 0);function le(e){e.component(se.name,se)}const de={name:"DvBorderBox7",mixins:[i],props:{color:{type:Array,default:()=>[]},backgroundColor:{type:String,default:"transparent"}},data:()=>({ref:"border-box-7",defaultColor:["rgba(128,128,128,0.3)","rgba(128,128,128,0.5)"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var ce=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-border-box-7",style:"box-shadow: inset 0 0 40px "+e.mergedColor[0]+"; border: 1px solid "+e.mergedColor[0]+"; background-color: "+e.backgroundColor},[n("svg",{staticClass:"dv-border-svg-container",attrs:{width:e.width,height:e.height}},[n("polyline",{staticClass:"dv-bb7-line-width-2",attrs:{stroke:e.mergedColor[0],points:"0, 25 0, 0 25, 0"}}),e._v(" "),n("polyline",{staticClass:"dv-bb7-line-width-2",attrs:{stroke:e.mergedColor[0],points:e.width-25+", 0 "+e.width+", 0 "+e.width+", 25"}}),e._v(" "),n("polyline",{staticClass:"dv-bb7-line-width-2",attrs:{stroke:e.mergedColor[0],points:e.width-25+", "+e.height+" "+e.width+", "+e.height+" "+e.width+", "+(e.height-25)}}),e._v(" "),n("polyline",{staticClass:"dv-bb7-line-width-2",attrs:{stroke:e.mergedColor[0],points:"0, "+(e.height-25)+" 0, "+e.height+" 25, "+e.height}}),e._v(" "),n("polyline",{staticClass:"dv-bb7-line-width-5",attrs:{stroke:e.mergedColor[1],points:"0, 10 0, 0 10, 0"}}),e._v(" "),n("polyline",{staticClass:"dv-bb7-line-width-5",attrs:{stroke:e.mergedColor[1],points:e.width-10+", 0 "+e.width+", 0 "+e.width+", 10"}}),e._v(" "),n("polyline",{staticClass:"dv-bb7-line-width-5",attrs:{stroke:e.mergedColor[1],points:e.width-10+", "+e.height+" "+e.width+", "+e.height+" "+e.width+", "+(e.height-10)}}),e._v(" "),n("polyline",{staticClass:"dv-bb7-line-width-5",attrs:{stroke:e.mergedColor[1],points:"0, "+(e.height-10)+" 0, "+e.height+" 10, "+e.height}})]),e._v(" "),n("div",{staticClass:"border-box-content"},[e._t("default")],2)])};ce._withStripped=!0;const ue=a({render:ce,staticRenderFns:[]},(function(e){e&&e("data-v-21156cd2_0",{source:".dv-border-box-7 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-7 .dv-border-svg-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-7 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-linecap: round;\n}\n.dv-border-box-7 .dv-bb7-line-width-2 {\n  stroke-width: 2;\n}\n.dv-border-box-7 .dv-bb7-line-width-5 {\n  stroke-width: 5;\n}\n.dv-border-box-7 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;AACd;AACA;EACE,UAAU;EACV,qBAAqB;AACvB;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-border-box-7 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-7 .dv-border-svg-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-7 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-linecap: round;\n}\n.dv-border-box-7 .dv-bb7-line-width-2 {\n  stroke-width: 2;\n}\n.dv-border-box-7 .dv-bb7-line-width-5 {\n  stroke-width: 5;\n}\n.dv-border-box-7 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),de,void 0,!1,void 0,!1,l,void 0,void 0);function he(e){e.component(ue.name,ue)}const fe={name:"DvBorderBox8",mixins:[i],props:{color:{type:Array,default:()=>[]},dur:{type:Number,default:3},backgroundColor:{type:String,default:"transparent"},reverse:{type:Boolean,default:!1}},data(){const e=r();return{ref:"border-box-8",path:"border-box-8-path-"+e,gradient:"border-box-8-gradient-"+e,mask:"border-box-8-mask-"+e,defaultColor:["#235fa7","#4fd2dd"],mergedColor:[]}},computed:{length(){const{width:e,height:t}=this;return 2*(e+t-5)},pathD(){const{reverse:e,width:t,height:n}=this;return e?`M 2.5, 2.5 L 2.5, ${n-2.5} L ${t-2.5}, ${n-2.5} L ${t-2.5}, 2.5 L 2.5, 2.5`:`M2.5, 2.5 L${t-2.5}, 2.5 L${t-2.5}, ${n-2.5} L2.5, ${n-2.5} L2.5, 2.5`}},watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var pe=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-border-box-8"},[n("svg",{staticClass:"dv-border-svg-container",attrs:{width:e.width,height:e.height}},[n("defs",[n("path",{attrs:{id:e.path,d:e.pathD,fill:"transparent"}}),e._v(" "),n("radialGradient",{attrs:{id:e.gradient,cx:"50%",cy:"50%",r:"50%"}},[n("stop",{attrs:{offset:"0%","stop-color":"#fff","stop-opacity":"1"}}),e._v(" "),n("stop",{attrs:{offset:"100%","stop-color":"#fff","stop-opacity":"0"}})],1),e._v(" "),n("mask",{attrs:{id:e.mask}},[n("circle",{attrs:{cx:"0",cy:"0",r:"150",fill:"url(#"+e.gradient+")"}},[n("animateMotion",{attrs:{dur:e.dur+"s",path:e.pathD,rotate:"auto",repeatCount:"indefinite"}})],1)])],1),e._v(" "),n("polygon",{attrs:{fill:e.backgroundColor,points:"5, 5 "+(e.width-5)+", 5 "+(e.width-5)+" "+(e.height-5)+" 5, "+(e.height-5)}}),e._v(" "),n("use",{attrs:{stroke:e.mergedColor[0],"stroke-width":"1","xlink:href":"#"+e.path}}),e._v(" "),n("use",{attrs:{stroke:e.mergedColor[1],"stroke-width":"3","xlink:href":"#"+e.path,mask:"url(#"+e.mask+")"}},[n("animate",{attrs:{attributeName:"stroke-dasharray",from:"0, "+e.length,to:e.length+", 0",dur:e.dur+"s",repeatCount:"indefinite"}})])]),e._v(" "),n("div",{staticClass:"border-box-content"},[e._t("default")],2)])};pe._withStripped=!0;const ge=a({render:pe,staticRenderFns:[]},(function(e){e&&e("data-v-681e49b5_0",{source:".dv-border-box-8 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-8 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-border-box-8 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-8 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),fe,void 0,!1,void 0,!1,l,void 0,void 0);function ve(e){e.component(ge.name,ge)}const me={name:"DvBorderBox9",mixins:[i],props:{color:{type:Array,default:()=>[]},backgroundColor:{type:String,default:"transparent"}},data(){const e=r();return{ref:"border-box-9",gradientId:"border-box-9-gradient-"+e,maskId:"border-box-9-mask-"+e,defaultColor:["#11eefd","#0078d2"],mergedColor:[]}},watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var Ae=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-border-box-9"},[n("svg",{staticClass:"dv-border-svg-container",attrs:{width:e.width,height:e.height}},[n("defs",[n("linearGradient",{attrs:{id:e.gradientId,x1:"0%",y1:"0%",x2:"100%",y2:"100%"}},[n("animate",{attrs:{attributeName:"x1",values:"0%;100%;0%",dur:"10s",begin:"0s",repeatCount:"indefinite"}}),e._v(" "),n("animate",{attrs:{attributeName:"x2",values:"100%;0%;100%",dur:"10s",begin:"0s",repeatCount:"indefinite"}}),e._v(" "),n("stop",{attrs:{offset:"0%","stop-color":e.mergedColor[0]}},[n("animate",{attrs:{attributeName:"stop-color",values:e.mergedColor[0]+";"+e.mergedColor[1]+";"+e.mergedColor[0],dur:"10s",begin:"0s",repeatCount:"indefinite"}})]),e._v(" "),n("stop",{attrs:{offset:"100%","stop-color":e.mergedColor[1]}},[n("animate",{attrs:{attributeName:"stop-color",values:e.mergedColor[1]+";"+e.mergedColor[0]+";"+e.mergedColor[1],dur:"10s",begin:"0s",repeatCount:"indefinite"}})])],1),e._v(" "),n("mask",{attrs:{id:e.maskId}},[n("polyline",{attrs:{stroke:"#fff","stroke-width":"3",fill:"transparent",points:"8, "+.4*e.height+" 8, 3, "+(.4*e.width+7)+", 3"}}),e._v(" "),n("polyline",{attrs:{fill:"#fff",points:"8, "+.15*e.height+" 8, 3, "+(.1*e.width+7)+", 3\n            "+.1*e.width+", 8 14, 8 14, "+(.15*e.height-7)+"\n          "}}),e._v(" "),n("polyline",{attrs:{stroke:"#fff","stroke-width":"3",fill:"transparent",points:.5*e.width+", 3 "+(e.width-3)+", 3, "+(e.width-3)+", "+.25*e.height}}),e._v(" "),n("polyline",{attrs:{fill:"#fff",points:"\n            "+.52*e.width+", 3 "+.58*e.width+", 3\n            "+(.58*e.width-7)+", 9 "+(.52*e.width+7)+", 9\n          "}}),e._v(" "),n("polyline",{attrs:{fill:"#fff",points:"\n            "+.9*e.width+", 3 "+(e.width-3)+", 3 "+(e.width-3)+", "+.1*e.height+"\n            "+(e.width-9)+", "+(.1*e.height-7)+" "+(e.width-9)+", 9 "+(.9*e.width+7)+", 9\n          "}}),e._v(" "),n("polyline",{attrs:{stroke:"#fff","stroke-width":"3",fill:"transparent",points:"8, "+.5*e.height+" 8, "+(e.height-3)+" "+(.3*e.width+7)+", "+(e.height-3)}}),e._v(" "),n("polyline",{attrs:{fill:"#fff",points:"\n            8, "+.55*e.height+" 8, "+.7*e.height+"\n            2, "+(.7*e.height-7)+" 2, "+(.55*e.height+7)+"\n          "}}),e._v(" "),n("polyline",{attrs:{stroke:"#fff","stroke-width":"3",fill:"transparent",points:.35*e.width+", "+(e.height-3)+" "+(e.width-3)+", "+(e.height-3)+" "+(e.width-3)+", "+.35*e.height}}),e._v(" "),n("polyline",{attrs:{fill:"#fff",points:"\n            "+.92*e.width+", "+(e.height-3)+" "+(e.width-3)+", "+(e.height-3)+" "+(e.width-3)+", "+.8*e.height+"\n            "+(e.width-9)+", "+(.8*e.height+7)+" "+(e.width-9)+", "+(e.height-9)+" "+(.92*e.width+7)+", "+(e.height-9)+"\n          "}})])],1),e._v(" "),n("polygon",{attrs:{fill:e.backgroundColor,points:"\n      15, 9 "+(.1*e.width+1)+", 9 "+(.1*e.width+4)+", 6 "+(.52*e.width+2)+", 6\n      "+(.52*e.width+6)+", 10 "+(.58*e.width-7)+", 10 "+(.58*e.width-2)+", 6\n      "+(.9*e.width+2)+", 6 "+(.9*e.width+6)+", 10 "+(e.width-10)+", 10 "+(e.width-10)+", "+(.1*e.height-6)+"\n      "+(e.width-6)+", "+(.1*e.height-1)+" "+(e.width-6)+", "+(.8*e.height+1)+" "+(e.width-10)+", "+(.8*e.height+6)+"\n      "+(e.width-10)+", "+(e.height-10)+" "+(.92*e.width+7)+", "+(e.height-10)+"  "+(.92*e.width+2)+", "+(e.height-6)+"\n      11, "+(e.height-6)+" 11, "+(.15*e.height-2)+" 15, "+(.15*e.height-7)+"\n    "}}),e._v(" "),n("rect",{attrs:{x:"0",y:"0",width:e.width,height:e.height,fill:"url(#"+e.gradientId+")",mask:"url(#"+e.maskId+")"}})]),e._v(" "),n("div",{staticClass:"border-box-content"},[e._t("default")],2)])};Ae._withStripped=!0;const Ce=a({render:Ae,staticRenderFns:[]},(function(e){e&&e("data-v-db539808_0",{source:".dv-border-box-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-9 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-border-box-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-9 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),me,void 0,!1,void 0,!1,l,void 0,void 0);function be(e){e.component(Ce.name,Ce)}const ye={name:"DvBorderBox10",mixins:[i],props:{color:{type:Array,default:()=>[]},backgroundColor:{type:String,default:"transparent"}},data:()=>({ref:"border-box-10",border:["left-top","right-top","left-bottom","right-bottom"],defaultColor:["#1d48c4","#d3e1f8"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var xe=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-border-box-10",style:"box-shadow: inset 0 0 25px 3px "+e.mergedColor[0]},[n("svg",{staticClass:"dv-border-svg-container",attrs:{width:e.width,height:e.height}},[n("polygon",{attrs:{fill:e.backgroundColor,points:"\n      4, 0 "+(e.width-4)+", 0 "+e.width+", 4 "+e.width+", "+(e.height-4)+" "+(e.width-4)+", "+e.height+"\n      4, "+e.height+" 0, "+(e.height-4)+" 0, 4\n    "}})]),e._v(" "),e._l(e.border,(function(t){return n("svg",{key:t,class:t+" dv-border-svg-container",attrs:{width:"150px",height:"150px"}},[n("polygon",{attrs:{fill:e.mergedColor[1],points:"40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"}})])})),e._v(" "),n("div",{staticClass:"border-box-content"},[e._t("default")],2)],2)};xe._withStripped=!0;const we=a({render:xe,staticRenderFns:[]},(function(e){e&&e("data-v-746a9ff1_0",{source:".dv-border-box-10 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: 6px;\n}\n.dv-border-box-10 .dv-border-svg-container {\n  position: absolute;\n  display: block;\n}\n.dv-border-box-10 .right-top {\n  right: 0px;\n  transform: rotateY(180deg);\n}\n.dv-border-box-10 .left-bottom {\n  bottom: 0px;\n  transform: rotateX(180deg);\n}\n.dv-border-box-10 .right-bottom {\n  right: 0px;\n  bottom: 0px;\n  transform: rotateX(180deg) rotateY(180deg);\n}\n.dv-border-box-10 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,cAAc;AAChB;AACA;EACE,UAAU;EACV,0BAA0B;AAC5B;AACA;EACE,WAAW;EACX,0BAA0B;AAC5B;AACA;EACE,UAAU;EACV,WAAW;EACX,0CAA0C;AAC5C;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-border-box-10 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: 6px;\n}\n.dv-border-box-10 .dv-border-svg-container {\n  position: absolute;\n  display: block;\n}\n.dv-border-box-10 .right-top {\n  right: 0px;\n  transform: rotateY(180deg);\n}\n.dv-border-box-10 .left-bottom {\n  bottom: 0px;\n  transform: rotateX(180deg);\n}\n.dv-border-box-10 .right-bottom {\n  right: 0px;\n  bottom: 0px;\n  transform: rotateX(180deg) rotateY(180deg);\n}\n.dv-border-box-10 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),ye,void 0,!1,void 0,!1,l,void 0,void 0);function ke(e){e.component(we.name,we)}var Ee=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=new Map([["transparent","rgba(0,0,0,0)"],["black","#000000"],["silver","#C0C0C0"],["gray","#808080"],["white","#FFFFFF"],["maroon","#800000"],["red","#FF0000"],["purple","#800080"],["fuchsia","#FF00FF"],["green","#008000"],["lime","#00FF00"],["olive","#808000"],["yellow","#FFFF00"],["navy","#000080"],["blue","#0000FF"],["teal","#008080"],["aqua","#00FFFF"],["aliceblue","#f0f8ff"],["antiquewhite","#faebd7"],["aquamarine","#7fffd4"],["azure","#f0ffff"],["beige","#f5f5dc"],["bisque","#ffe4c4"],["blanchedalmond","#ffebcd"],["blueviolet","#8a2be2"],["brown","#a52a2a"],["burlywood","#deb887"],["cadetblue","#5f9ea0"],["chartreuse","#7fff00"],["chocolate","#d2691e"],["coral","#ff7f50"],["cornflowerblue","#6495ed"],["cornsilk","#fff8dc"],["crimson","#dc143c"],["cyan","#00ffff"],["darkblue","#00008b"],["darkcyan","#008b8b"],["darkgoldenrod","#b8860b"],["darkgray","#a9a9a9"],["darkgreen","#006400"],["darkgrey","#a9a9a9"],["darkkhaki","#bdb76b"],["darkmagenta","#8b008b"],["darkolivegreen","#556b2f"],["darkorange","#ff8c00"],["darkorchid","#9932cc"],["darkred","#8b0000"],["darksalmon","#e9967a"],["darkseagreen","#8fbc8f"],["darkslateblue","#483d8b"],["darkslategray","#2f4f4f"],["darkslategrey","#2f4f4f"],["darkturquoise","#00ced1"],["darkviolet","#9400d3"],["deeppink","#ff1493"],["deepskyblue","#00bfff"],["dimgray","#696969"],["dimgrey","#696969"],["dodgerblue","#1e90ff"],["firebrick","#b22222"],["floralwhite","#fffaf0"],["forestgreen","#228b22"],["gainsboro","#dcdcdc"],["ghostwhite","#f8f8ff"],["gold","#ffd700"],["goldenrod","#daa520"],["greenyellow","#adff2f"],["grey","#808080"],["honeydew","#f0fff0"],["hotpink","#ff69b4"],["indianred","#cd5c5c"],["indigo","#4b0082"],["ivory","#fffff0"],["khaki","#f0e68c"],["lavender","#e6e6fa"],["lavenderblush","#fff0f5"],["lawngreen","#7cfc00"],["lemonchiffon","#fffacd"],["lightblue","#add8e6"],["lightcoral","#f08080"],["lightcyan","#e0ffff"],["lightgoldenrodyellow","#fafad2"],["lightgray","#d3d3d3"],["lightgreen","#90ee90"],["lightgrey","#d3d3d3"],["lightpink","#ffb6c1"],["lightsalmon","#ffa07a"],["lightseagreen","#20b2aa"],["lightskyblue","#87cefa"],["lightslategray","#778899"],["lightslategrey","#778899"],["lightsteelblue","#b0c4de"],["lightyellow","#ffffe0"],["limegreen","#32cd32"],["linen","#faf0e6"],["magenta","#ff00ff"],["mediumaquamarine","#66cdaa"],["mediumblue","#0000cd"],["mediumorchid","#ba55d3"],["mediumpurple","#9370db"],["mediumseagreen","#3cb371"],["mediumslateblue","#7b68ee"],["mediumspringgreen","#00fa9a"],["mediumturquoise","#48d1cc"],["mediumvioletred","#c71585"],["midnightblue","#191970"],["mintcream","#f5fffa"],["mistyrose","#ffe4e1"],["moccasin","#ffe4b5"],["navajowhite","#ffdead"],["oldlace","#fdf5e6"],["olivedrab","#6b8e23"],["orange","#ffa500"],["orangered","#ff4500"],["orchid","#da70d6"],["palegoldenrod","#eee8aa"],["palegreen","#98fb98"],["paleturquoise","#afeeee"],["palevioletred","#db7093"],["papayawhip","#ffefd5"],["peachpuff","#ffdab9"],["peru","#cd853f"],["pink","#ffc0cb"],["plum","#dda0dd"],["powderblue","#b0e0e6"],["rosybrown","#bc8f8f"],["royalblue","#4169e1"],["saddlebrown","#8b4513"],["salmon","#fa8072"],["sandybrown","#f4a460"],["seagreen","#2e8b57"],["seashell","#fff5ee"],["sienna","#a0522d"],["skyblue","#87ceeb"],["slateblue","#6a5acd"],["slategray","#708090"],["slategrey","#708090"],["snow","#fffafa"],["springgreen","#00ff7f"],["steelblue","#4682b4"],["tan","#d2b48c"],["thistle","#d8bfd8"],["tomato","#ff6347"],["turquoise","#40e0d0"],["violet","#ee82ee"],["wheat","#f5deb3"],["whitesmoke","#f5f5f5"],["yellowgreen","#9acd32"]]);t.default=n}));C(Ee);var Be=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.getRgbValue=l,t.getRgbaValue=d,t.getOpacity=c,t.toRgb=u,t.toHex=h,t.getColorFromRgbValue=f,t.darken=p,t.lighten=g,t.fade=v,t.default=void 0;var n=y(P),r=y(Ee),i=/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/,o=/^(rgb|rgba|RGB|RGBA)/,a=/^(rgba|RGBA)/;function s(e){var t=i.test(e),n=o.test(e);return t||n?e:(e=function(e){if(!e)return console.error("getColorByKeywords: Missing parameters!"),!1;return!!r.default.has(e)&&r.default.get(e)}(e))||(console.error("Color: Invalid color!"),!1)}function l(e){if(!e)return console.error("getRgbValue: Missing parameters!"),!1;if(!(e=s(e)))return!1;var t=i.test(e),n=o.test(e),r=e.toLowerCase();return t?function(e){3===(e=e.replace("#","")).length&&(e=Array.from(e).map((function(e){return e+e})).join(""));return e=e.split(""),new Array(3).fill(0).map((function(t,n){return parseInt("0x".concat(e[2*n]).concat(e[2*n+1]))}))}(r):n?function(e){return e.replace(/rgb\(|rgba\(|\)/g,"").split(",").slice(0,3).map((function(e){return parseInt(e)}))}(r):void 0}function d(e){if(!e)return console.error("getRgbaValue: Missing parameters!"),!1;var t=l(e);return!!t&&(t.push(c(e)),t)}function c(e){return e?!!(e=s(e))&&(a.test(e)?(e=e.toLowerCase(),Number(e.split(",").slice(-1)[0].replace(/[)|\s]/g,""))):1):(console.error("getOpacity: Missing parameters!"),!1)}function u(e,t){if(!e)return console.error("toRgb: Missing parameters!"),!1;var n=l(e);return!!n&&("number"==typeof t?"rgba("+n.join(",")+",".concat(t,")"):"rgb("+n.join(",")+")")}function h(e){return e?i.test(e)?e:!!(e=l(e))&&"#"+e.map((function(e){return Number(e).toString(16)})).map((function(e){return"0"===e?"00":e})).join(""):(console.error("toHex: Missing parameters!"),!1)}function f(e){if(!e)return console.error("getColorFromRgbValue: Missing parameters!"),!1;var t=e.length;if(3!==t&&4!==t)return console.error("getColorFromRgbValue: Value is illegal!"),!1;var n=3===t?"rgb(":"rgba(";return n+=e.join(",")+")"}function p(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;if(!e)return console.error("darken: Missing parameters!"),!1;var n=d(e);return!!n&&f(n=n.map((function(e,n){return 3===n?e:e-Math.ceil(2.55*t)})).map((function(e){return e<0?0:e})))}function g(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;if(!e)return console.error("lighten: Missing parameters!"),!1;var n=d(e);return!!n&&f(n=n.map((function(e,n){return 3===n?e:e+Math.ceil(2.55*t)})).map((function(e){return e>255?255:e})))}function v(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100;if(!e)return console.error("fade: Missing parameters!"),!1;var r=l(e);if(!r)return!1;var i=[].concat((0,n.default)(r),[t/100]);return f(i)}var m={fade:v,toHex:h,toRgb:u,darken:p,lighten:g,getOpacity:c,getRgbValue:l,getRgbaValue:d,getColorFromRgbValue:f};t.default=m}));C(Be);Be.getRgbValue,Be.getRgbaValue,Be.getOpacity,Be.toRgb,Be.toHex,Be.getColorFromRgbValue,Be.darken,Be.lighten;var Pe=Be.fade;const _e={name:"DvBorderBox11",mixins:[i],props:{color:{type:Array,default:()=>[]},titleWidth:{type:Number,default:250},title:{type:String,default:""},backgroundColor:{type:String,default:"transparent"}},data:()=>({ref:"border-box-11",filterId:"border-box-11-filterId-"+r(),defaultColor:["#8aaafb","#1f33a2"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])},fade:Pe},mounted(){const{mergeColor:e}=this;e()}};var Se=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-border-box-11"},[n("svg",{staticClass:"dv-border-svg-container",attrs:{width:e.width,height:e.height}},[n("defs",[n("filter",{attrs:{id:e.filterId,height:"150%",width:"150%",x:"-25%",y:"-25%"}},[n("feMorphology",{attrs:{operator:"dilate",radius:"2",in:"SourceAlpha",result:"thicken"}}),e._v(" "),n("feGaussianBlur",{attrs:{in:"thicken",stdDeviation:"3",result:"blurred"}}),e._v(" "),n("feFlood",{attrs:{"flood-color":e.mergedColor[1],result:"glowColor"}}),e._v(" "),n("feComposite",{attrs:{in:"glowColor",in2:"blurred",operator:"in",result:"softGlowColored"}}),e._v(" "),n("feMerge",[n("feMergeNode",{attrs:{in:"softGlowColored"}}),e._v(" "),n("feMergeNode",{attrs:{in:"SourceGraphic"}})],1)],1)]),e._v(" "),n("polygon",{attrs:{fill:e.backgroundColor,points:"\n      20, 32 "+(.5*e.width-e.titleWidth/2)+", 32 "+(.5*e.width-e.titleWidth/2+20)+", 53\n      "+(.5*e.width+e.titleWidth/2-20)+", 53 "+(.5*e.width+e.titleWidth/2)+", 32\n      "+(e.width-20)+", 32 "+(e.width-8)+", 48 "+(e.width-8)+", "+(e.height-25)+" "+(e.width-20)+", "+(e.height-8)+"\n      20, "+(e.height-8)+" 8, "+(e.height-25)+" 8, 50\n    "}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],filter:"url(#"+e.filterId+")",points:"\n        "+(e.width-e.titleWidth)/2+", 30\n        20, 30 7, 50 7, "+(50+(e.height-167)/2)+"\n        13, "+(55+(e.height-167)/2)+" 13, "+(135+(e.height-167)/2)+"\n        7, "+(140+(e.height-167)/2)+" 7, "+(e.height-27)+"\n        20, "+(e.height-7)+" "+(e.width-20)+", "+(e.height-7)+" "+(e.width-7)+", "+(e.height-27)+"\n        "+(e.width-7)+", "+(140+(e.height-167)/2)+" "+(e.width-13)+", "+(135+(e.height-167)/2)+"\n        "+(e.width-13)+", "+(55+(e.height-167)/2)+" "+(e.width-7)+", "+(50+(e.height-167)/2)+"\n        "+(e.width-7)+", 50 "+(e.width-20)+", 30 "+(e.width+e.titleWidth)/2+", 30\n        "+((e.width+e.titleWidth)/2-20)+", 7 "+((e.width-e.titleWidth)/2+20)+", 7\n        "+(e.width-e.titleWidth)/2+", 30 "+((e.width-e.titleWidth)/2+20)+", 52\n        "+((e.width+e.titleWidth)/2-20)+", 52 "+(e.width+e.titleWidth)/2+", 30\n      "}}),e._v(" "),n("polygon",{attrs:{stroke:e.mergedColor[0],fill:"transparent",points:"\n        "+((e.width+e.titleWidth)/2-5)+", 30 "+((e.width+e.titleWidth)/2-21)+", 11\n        "+((e.width+e.titleWidth)/2-27)+", 11 "+((e.width+e.titleWidth)/2-8)+", 34\n      "}}),e._v(" "),n("polygon",{attrs:{stroke:e.mergedColor[0],fill:"transparent",points:"\n        "+((e.width-e.titleWidth)/2+5)+", 30 "+((e.width-e.titleWidth)/2+22)+", 49\n        "+((e.width-e.titleWidth)/2+28)+", 49 "+((e.width-e.titleWidth)/2+8)+", 26\n      "}}),e._v(" "),n("polygon",{attrs:{stroke:e.mergedColor[0],fill:e.fade(e.mergedColor[1]||e.defaultColor[1],30),filter:"url(#"+e.filterId+")",points:"\n        "+((e.width+e.titleWidth)/2-11)+", 37 "+((e.width+e.titleWidth)/2-32)+", 11\n        "+((e.width-e.titleWidth)/2+23)+", 11 "+((e.width-e.titleWidth)/2+11)+", 23\n        "+((e.width-e.titleWidth)/2+33)+", 49 "+((e.width+e.titleWidth)/2-22)+", 49\n      "}}),e._v(" "),n("polygon",{attrs:{filter:"url(#"+e.filterId+")",fill:e.mergedColor[0],opacity:"1",points:"\n        "+((e.width-e.titleWidth)/2-10)+", 37 "+((e.width-e.titleWidth)/2-31)+", 37\n        "+((e.width-e.titleWidth)/2-25)+", 46 "+((e.width-e.titleWidth)/2-4)+", 46\n      "}},[n("animate",{attrs:{attributeName:"opacity",values:"1;0.7;1",dur:"2s",begin:"0s",repeatCount:"indefinite"}})]),e._v(" "),n("polygon",{attrs:{filter:"url(#"+e.filterId+")",fill:e.mergedColor[0],opacity:"0.7",points:"\n        "+((e.width-e.titleWidth)/2-40)+", 37 "+((e.width-e.titleWidth)/2-61)+", 37\n        "+((e.width-e.titleWidth)/2-55)+", 46 "+((e.width-e.titleWidth)/2-34)+", 46\n      "}},[n("animate",{attrs:{attributeName:"opacity",values:"0.7;0.4;0.7",dur:"2s",begin:"0s",repeatCount:"indefinite"}})]),e._v(" "),n("polygon",{attrs:{filter:"url(#"+e.filterId+")",fill:e.mergedColor[0],opacity:"0.5",points:"\n        "+((e.width-e.titleWidth)/2-70)+", 37 "+((e.width-e.titleWidth)/2-91)+", 37\n        "+((e.width-e.titleWidth)/2-85)+", 46 "+((e.width-e.titleWidth)/2-64)+", 46\n      "}},[n("animate",{attrs:{attributeName:"opacity",values:"0.5;0.2;0.5",dur:"2s",begin:"0s",repeatCount:"indefinite"}})]),e._v(" "),n("polygon",{attrs:{filter:"url(#"+e.filterId+")",fill:e.mergedColor[0],opacity:"1",points:"\n        "+((e.width+e.titleWidth)/2+30)+", 37 "+((e.width+e.titleWidth)/2+9)+", 37\n        "+((e.width+e.titleWidth)/2+3)+", 46 "+((e.width+e.titleWidth)/2+24)+", 46\n      "}},[n("animate",{attrs:{attributeName:"opacity",values:"1;0.7;1",dur:"2s",begin:"0s",repeatCount:"indefinite"}})]),e._v(" "),n("polygon",{attrs:{filter:"url(#"+e.filterId+")",fill:e.mergedColor[0],opacity:"0.7",points:"\n        "+((e.width+e.titleWidth)/2+60)+", 37 "+((e.width+e.titleWidth)/2+39)+", 37\n        "+((e.width+e.titleWidth)/2+33)+", 46 "+((e.width+e.titleWidth)/2+54)+", 46\n      "}},[n("animate",{attrs:{attributeName:"opacity",values:"0.7;0.4;0.7",dur:"2s",begin:"0s",repeatCount:"indefinite"}})]),e._v(" "),n("polygon",{attrs:{filter:"url(#"+e.filterId+")",fill:e.mergedColor[0],opacity:"0.5",points:"\n        "+((e.width+e.titleWidth)/2+90)+", 37 "+((e.width+e.titleWidth)/2+69)+", 37\n        "+((e.width+e.titleWidth)/2+63)+", 46 "+((e.width+e.titleWidth)/2+84)+", 46\n      "}},[n("animate",{attrs:{attributeName:"opacity",values:"0.5;0.2;0.5",dur:"2s",begin:"0s",repeatCount:"indefinite"}})]),e._v(" "),n("text",{staticClass:"dv-border-box-11-title",attrs:{x:""+e.width/2,y:"32",fill:"#fff","font-size":"18","text-anchor":"middle","dominant-baseline":"middle"}},[e._v("\n      "+e._s(e.title)+"\n    ")]),e._v(" "),n("polygon",{attrs:{fill:e.mergedColor[0],filter:"url(#"+e.filterId+")",points:"\n        7, "+(53+(e.height-167)/2)+" 11, "+(57+(e.height-167)/2)+"\n        11, "+(133+(e.height-167)/2)+" 7, "+(137+(e.height-167)/2)+"\n      "}}),e._v(" "),n("polygon",{attrs:{fill:e.mergedColor[0],filter:"url(#"+e.filterId+")",points:"\n        "+(e.width-7)+", "+(53+(e.height-167)/2)+" "+(e.width-11)+", "+(57+(e.height-167)/2)+"\n        "+(e.width-11)+", "+(133+(e.height-167)/2)+" "+(e.width-7)+", "+(137+(e.height-167)/2)+"\n      "}})]),e._v(" "),n("div",{staticClass:"border-box-content"},[e._t("default")],2)])};Se._withStripped=!0;const Oe=a({render:Se,staticRenderFns:[]},(function(e){e&&e("data-v-10f995ec_0",{source:".dv-border-box-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;EACV,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-border-box-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container > polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),_e,void 0,!1,void 0,!1,l,void 0,void 0);function Ie(e){e.component(Oe.name,Oe)}const We={name:"DvBorderBox12",mixins:[i],props:{color:{type:Array,default:()=>[]},backgroundColor:{type:String,default:"transparent"}},data:()=>({ref:"border-box-12",filterId:"borderr-box-12-filterId-"+r(),defaultColor:["#2e6099","#7ce7fd"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])},fade:Pe},mounted(){const{mergeColor:e}=this;e()}};var Le=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-border-box-12"},[n("svg",{staticClass:"dv-border-svg-container",attrs:{width:e.width,height:e.height}},[n("defs",[n("filter",{attrs:{id:e.filterId,height:"150%",width:"150%",x:"-25%",y:"-25%"}},[n("feMorphology",{attrs:{operator:"dilate",radius:"1",in:"SourceAlpha",result:"thicken"}}),e._v(" "),n("feGaussianBlur",{attrs:{in:"thicken",stdDeviation:"2",result:"blurred"}}),e._v(" "),n("feFlood",{attrs:{"flood-color":e.fade(e.mergedColor[1]||e.defaultColor[1],70),result:"glowColor"}},[n("animate",{attrs:{attributeName:"flood-color",values:"\n              "+e.fade(e.mergedColor[1]||e.defaultColor[1],70)+";\n              "+e.fade(e.mergedColor[1]||e.defaultColor[1],30)+";\n              "+e.fade(e.mergedColor[1]||e.defaultColor[1],70)+";\n            ",dur:"3s",begin:"0s",repeatCount:"indefinite"}})]),e._v(" "),n("feComposite",{attrs:{in:"glowColor",in2:"blurred",operator:"in",result:"softGlowColored"}}),e._v(" "),n("feMerge",[n("feMergeNode",{attrs:{in:"softGlowColored"}}),e._v(" "),n("feMergeNode",{attrs:{in:"SourceGraphic"}})],1)],1)]),e._v(" "),e.width&&e.height?n("path",{attrs:{fill:e.backgroundColor,"stroke-width":"2",stroke:e.mergedColor[0],d:"\n        M15 5 L "+(e.width-15)+" 5 Q "+(e.width-5)+" 5, "+(e.width-5)+" 15\n        L "+(e.width-5)+" "+(e.height-15)+" Q "+(e.width-5)+" "+(e.height-5)+", "+(e.width-15)+" "+(e.height-5)+"\n        L 15, "+(e.height-5)+" Q 5 "+(e.height-5)+" 5 "+(e.height-15)+" L 5 15\n        Q 5 5 15 5\n      "}}):e._e(),e._v(" "),n("path",{attrs:{"stroke-width":"2",fill:"transparent","stroke-linecap":"round",filter:"url(#"+e.filterId+")",stroke:e.mergedColor[1],d:"M 20 5 L 15 5 Q 5 5 5 15 L 5 20"}}),e._v(" "),n("path",{attrs:{"stroke-width":"2",fill:"transparent","stroke-linecap":"round",filter:"url(#"+e.filterId+")",stroke:e.mergedColor[1],d:"M "+(e.width-20)+" 5 L "+(e.width-15)+" 5 Q "+(e.width-5)+" 5 "+(e.width-5)+" 15 L "+(e.width-5)+" 20"}}),e._v(" "),n("path",{attrs:{"stroke-width":"2",fill:"transparent","stroke-linecap":"round",filter:"url(#"+e.filterId+")",stroke:e.mergedColor[1],d:"\n        M "+(e.width-20)+" "+(e.height-5)+" L "+(e.width-15)+" "+(e.height-5)+"\n        Q "+(e.width-5)+" "+(e.height-5)+" "+(e.width-5)+" "+(e.height-15)+"\n        L "+(e.width-5)+" "+(e.height-20)+"\n      "}}),e._v(" "),n("path",{attrs:{"stroke-width":"2",fill:"transparent","stroke-linecap":"round",filter:"url(#"+e.filterId+")",stroke:e.mergedColor[1],d:"\n        M 20 "+(e.height-5)+" L 15 "+(e.height-5)+"\n        Q 5 "+(e.height-5)+" 5 "+(e.height-15)+"\n        L 5 "+(e.height-20)+"\n      "}})]),e._v(" "),n("div",{staticClass:"border-box-content"},[e._t("default")],2)])};Le._withStripped=!0;const je=a({render:Le,staticRenderFns:[]},(function(e){e&&e("data-v-40c58fd4_0",{source:".dv-border-box-12 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-border-box-12 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),We,void 0,!1,void 0,!1,l,void 0,void 0);function Me(e){e.component(je.name,je)}const Fe={name:"DvBorderBox13",mixins:[i],props:{color:{type:Array,default:()=>[]},backgroundColor:{type:String,default:"transparent"}},data:()=>({ref:"border-box-13",defaultColor:["#6586ec","#2cf7fe"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var De=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-border-box-13"},[n("svg",{staticClass:"dv-border-svg-container",attrs:{width:e.width,height:e.height}},[n("path",{attrs:{fill:e.backgroundColor,stroke:e.mergedColor[0],d:"\n        M 5 20 L 5 10 L 12 3  L 60 3 L 68 10\n        L "+(e.width-20)+" 10 L "+(e.width-5)+" 25\n        L "+(e.width-5)+" "+(e.height-5)+" L 20 "+(e.height-5)+"\n        L 5 "+(e.height-20)+" L 5 20\n      "}}),e._v(" "),n("path",{attrs:{fill:"transparent","stroke-width":"3","stroke-linecap":"round","stroke-dasharray":"10, 5",stroke:e.mergedColor[0],d:"M 16 9 L 61 9"}}),e._v(" "),n("path",{attrs:{fill:"transparent",stroke:e.mergedColor[1],d:"M 5 20 L 5 10 L 12 3  L 60 3 L 68 10"}}),e._v(" "),n("path",{attrs:{fill:"transparent",stroke:e.mergedColor[1],d:"M "+(e.width-5)+" "+(e.height-30)+" L "+(e.width-5)+" "+(e.height-5)+" L "+(e.width-30)+" "+(e.height-5)}})]),e._v(" "),n("div",{staticClass:"border-box-content"},[e._t("default")],2)])};De._withStripped=!0;const Re=a({render:De,staticRenderFns:[]},(function(e){e&&e("data-v-6c30a53b_0",{source:".dv-border-box-13 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-border-box-13 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),Fe,void 0,!1,void 0,!1,l,void 0,void 0);function Ge(e){e.component(Re.name,Re)}const ze={name:"DvDecoration1",mixins:[i],props:{color:{type:Array,default:()=>[]}},data:()=>({ref:"decoration-1",svgWH:[200,50],svgScale:[1,1],rowNum:4,rowPoints:20,pointSideLength:2.5,halfPointSideLength:1.25,points:[],rects:[],defaultColor:["#fff","#0de7c2"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{afterAutoResizeMixinInit(){const{calcSVGData:e}=this;e()},calcSVGData(){const{calcPointsPosition:e,calcRectsPosition:t,calcScale:n}=this;e(),t(),n()},calcPointsPosition(){const{svgWH:e,rowNum:t,rowPoints:n}=this,[r,i]=e,o=r/(n+1),a=i/(t+1);let s=new Array(t).fill(0).map((e,t)=>new Array(n).fill(0).map((e,n)=>[o*(n+1),a*(t+1)]));this.points=s.reduce((e,t)=>[...e,...t],[])},calcRectsPosition(){const{points:e,rowPoints:t}=this,n=e[2*t-1],r=e[2*t-3];this.rects=[n,r]},calcScale(){const{width:e,height:t,svgWH:n}=this,[r,i]=n;this.svgScale=[e/r,t/i]},onResize(){const{calcSVGData:e}=this;e()},mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var Te=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-decoration-1"},[n("svg",{style:"transform:scale("+e.svgScale[0]+","+e.svgScale[1]+");",attrs:{width:e.svgWH[0]+"px",height:e.svgWH[1]+"px"}},[e._l(e.points,(function(t,r){return[Math.random()>.6?n("rect",{key:r,attrs:{fill:e.mergedColor[0],x:t[0]-e.halfPointSideLength,y:t[1]-e.halfPointSideLength,width:e.pointSideLength,height:e.pointSideLength}},[Math.random()>.6?n("animate",{attrs:{attributeName:"fill",values:e.mergedColor[0]+";transparent",dur:"1s",begin:2*Math.random(),repeatCount:"indefinite"}}):e._e()]):e._e()]})),e._v(" "),e.rects[0]?n("rect",{attrs:{fill:e.mergedColor[1],x:e.rects[0][0]-e.pointSideLength,y:e.rects[0][1]-e.pointSideLength,width:2*e.pointSideLength,height:2*e.pointSideLength}},[n("animate",{attrs:{attributeName:"width",values:"0;"+2*e.pointSideLength,dur:"2s",repeatCount:"indefinite"}}),e._v(" "),n("animate",{attrs:{attributeName:"height",values:"0;"+2*e.pointSideLength,dur:"2s",repeatCount:"indefinite"}}),e._v(" "),n("animate",{attrs:{attributeName:"x",values:e.rects[0][0]+";"+(e.rects[0][0]-e.pointSideLength),dur:"2s",repeatCount:"indefinite"}}),e._v(" "),n("animate",{attrs:{attributeName:"y",values:e.rects[0][1]+";"+(e.rects[0][1]-e.pointSideLength),dur:"2s",repeatCount:"indefinite"}})]):e._e(),e._v(" "),e.rects[1]?n("rect",{attrs:{fill:e.mergedColor[1],x:e.rects[1][0]-40,y:e.rects[1][1]-e.pointSideLength,width:40,height:2*e.pointSideLength}},[n("animate",{attrs:{attributeName:"width",values:"0;40;0",dur:"2s",repeatCount:"indefinite"}}),e._v(" "),n("animate",{attrs:{attributeName:"x",values:e.rects[1][0]+";"+(e.rects[1][0]-40)+";"+e.rects[1][0],dur:"2s",repeatCount:"indefinite"}})]):e._e()],2)])};Te._withStripped=!0;const Ye=a({render:Te,staticRenderFns:[]},(function(e){e&&e("data-v-69241e60_0",{source:".dv-decoration-1 {\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-1 svg {\n  transform-origin: left top;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,0BAA0B;AAC5B",file:"main.vue",sourcesContent:[".dv-decoration-1 {\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-1 svg {\n  transform-origin: left top;\n}\n"]},media:void 0})}),ze,void 0,!1,void 0,!1,l,void 0,void 0);function Ne(e){e.component(Ye.name,Ye)}const Xe={name:"DvDecoration2",mixins:[i],props:{color:{type:Array,default:()=>[]},reverse:{type:Boolean,default:!1},dur:{type:Number,default:6}},data:()=>({ref:"decoration-2",x:0,y:0,w:0,h:0,defaultColor:["#3faacb","#fff"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()},reverse(){const{calcSVGData:e}=this;e()}},methods:{afterAutoResizeMixinInit(){const{calcSVGData:e}=this;e()},calcSVGData(){const{reverse:e,width:t,height:n}=this;e?(this.w=1,this.h=n,this.x=t/2,this.y=0):(this.w=t,this.h=1,this.x=0,this.y=n/2)},onResize(){const{calcSVGData:e}=this;e()},mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var $e=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-decoration-2"},[n("svg",{attrs:{width:e.width+"px",height:e.height+"px"}},[n("rect",{attrs:{x:e.x,y:e.y,width:e.w,height:e.h,fill:e.mergedColor[0]}},[n("animate",{attrs:{attributeName:e.reverse?"height":"width",from:"0",to:e.reverse?e.height:e.width,dur:e.dur+"s",calcMode:"spline",keyTimes:"0;1",keySplines:".42,0,.58,1",repeatCount:"indefinite"}})]),e._v(" "),n("rect",{attrs:{x:e.x,y:e.y,width:"1",height:"1",fill:e.mergedColor[1]}},[n("animate",{attrs:{attributeName:e.reverse?"y":"x",from:"0",to:e.reverse?e.height:e.width,dur:e.dur+"s",calcMode:"spline",keyTimes:"0;1",keySplines:"0.42,0,0.58,1",repeatCount:"indefinite"}})])])])};$e._withStripped=!0;const He=a({render:$e,staticRenderFns:[]},(function(e){e&&e("data-v-355e4674_0",{source:".dv-decoration-2 {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,aAAa;EACb,WAAW;EACX,YAAY;EACZ,uBAAuB;EACvB,mBAAmB;AACrB",file:"main.vue",sourcesContent:[".dv-decoration-2 {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n}\n"]},media:void 0})}),Xe,void 0,!1,void 0,!1,l,void 0,void 0);function Qe(e){e.component(He.name,He)}const Ue={name:"DvDecoration3",mixins:[i],props:{color:{type:Array,default:()=>[]}},data:()=>({ref:"decoration-3",svgWH:[300,35],svgScale:[1,1],rowNum:2,rowPoints:25,pointSideLength:7,halfPointSideLength:3.5,points:[],defaultColor:["#7acaec","transparent"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{afterAutoResizeMixinInit(){const{calcSVGData:e}=this;e()},calcSVGData(){const{calcPointsPosition:e,calcScale:t}=this;e(),t()},calcPointsPosition(){const{svgWH:e,rowNum:t,rowPoints:n}=this,[r,i]=e,o=r/(n+1),a=i/(t+1);let s=new Array(t).fill(0).map((e,t)=>new Array(n).fill(0).map((e,n)=>[o*(n+1),a*(t+1)]));this.points=s.reduce((e,t)=>[...e,...t],[])},calcScale(){const{width:e,height:t,svgWH:n}=this,[r,i]=n;this.svgScale=[e/r,t/i]},onResize(){const{calcSVGData:e}=this;e()},mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var Ve=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-decoration-3"},[n("svg",{style:"transform:scale("+e.svgScale[0]+","+e.svgScale[1]+");",attrs:{width:e.svgWH[0]+"px",height:e.svgWH[1]+"px"}},[e._l(e.points,(function(t,r){return[n("rect",{key:r,attrs:{fill:e.mergedColor[0],x:t[0]-e.halfPointSideLength,y:t[1]-e.halfPointSideLength,width:e.pointSideLength,height:e.pointSideLength}},[Math.random()>.6?n("animate",{attrs:{attributeName:"fill",values:""+e.mergedColor.join(";"),dur:Math.random()+1+"s",begin:2*Math.random(),repeatCount:"indefinite"}}):e._e()])]}))],2)])};Ve._withStripped=!0;const qe=a({render:Ve,staticRenderFns:[]},(function(e){e&&e("data-v-2cd3ac93_0",{source:".dv-decoration-3 {\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-3 svg {\n  transform-origin: left top;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,0BAA0B;AAC5B",file:"main.vue",sourcesContent:[".dv-decoration-3 {\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-3 svg {\n  transform-origin: left top;\n}\n"]},media:void 0})}),Ue,void 0,!1,void 0,!1,l,void 0,void 0);function Ze(e){e.component(qe.name,qe)}const Ke={name:"DvDecoration4",mixins:[i],props:{color:{type:Array,default:()=>[]},reverse:{type:Boolean,default:!1},dur:{type:Number,default:3}},data:()=>({ref:"decoration-4",defaultColor:["rgba(255, 255, 255, 0.3)","rgba(255, 255, 255, 0.3)"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var Je=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-decoration-4"},[n("div",{class:"container "+(e.reverse?"reverse":"normal"),style:e.reverse?"width:"+e.width+"px;height:5px;animation-duration:"+e.dur+"s":"width:5px;height:"+e.height+"px;animation-duration:"+e.dur+"s"},[n("svg",{attrs:{width:e.reverse?e.width:5,height:e.reverse?5:e.height}},[n("polyline",{attrs:{stroke:e.mergedColor[0],points:e.reverse?"0, 2.5 "+e.width+", 2.5":"2.5, 0 2.5, "+e.height}}),e._v(" "),n("polyline",{staticClass:"bold-line",attrs:{stroke:e.mergedColor[1],"stroke-width":"3","stroke-dasharray":"20, 80","stroke-dashoffset":"-30",points:e.reverse?"0, 2.5 "+e.width+", 2.5":"2.5, 0 2.5, "+e.height}})])])])};Je._withStripped=!0;const et=a({render:Je,staticRenderFns:[]},(function(e){e&&e("data-v-506ac984_0",{source:".dv-decoration-4 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-4 .container {\n  display: flex;\n  overflow: hidden;\n  position: absolute;\n  flex: 1;\n}\n.dv-decoration-4 .normal {\n  animation: ani-height ease-in-out infinite;\n  left: 50%;\n  margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n  animation: ani-width ease-in-out infinite;\n  top: 50%;\n  margin-top: -2px;\n}\n@keyframes ani-height {\n0% {\n    height: 0%;\n}\n70% {\n    height: 100%;\n}\n100% {\n    height: 100%;\n}\n}\n@keyframes ani-width {\n0% {\n    width: 0%;\n}\n70% {\n    width: 100%;\n}\n100% {\n    width: 100%;\n}\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,aAAa;EACb,gBAAgB;EAChB,kBAAkB;EAClB,OAAO;AACT;AACA;EACE,0CAA0C;EAC1C,SAAS;EACT,iBAAiB;AACnB;AACA;EACE,yCAAyC;EACzC,QAAQ;EACR,gBAAgB;AAClB;AACA;AACE;IACE,UAAU;AACZ;AACA;IACE,YAAY;AACd;AACA;IACE,YAAY;AACd;AACF;AACA;AACE;IACE,SAAS;AACX;AACA;IACE,WAAW;AACb;AACA;IACE,WAAW;AACb;AACF",file:"main.vue",sourcesContent:[".dv-decoration-4 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-4 .container {\n  display: flex;\n  overflow: hidden;\n  position: absolute;\n  flex: 1;\n}\n.dv-decoration-4 .normal {\n  animation: ani-height ease-in-out infinite;\n  left: 50%;\n  margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n  animation: ani-width ease-in-out infinite;\n  top: 50%;\n  margin-top: -2px;\n}\n@keyframes ani-height {\n  0% {\n    height: 0%;\n  }\n  70% {\n    height: 100%;\n  }\n  100% {\n    height: 100%;\n  }\n}\n@keyframes ani-width {\n  0% {\n    width: 0%;\n  }\n  70% {\n    width: 100%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n"]},media:void 0})}),Ke,void 0,!1,void 0,!1,l,void 0,void 0);function tt(e){e.component(et.name,et)}const nt={name:"DvDecoration5",mixins:[i],props:{color:{type:Array,default:()=>[]},dur:{type:Number,default:1.2}},data:()=>({ref:"decoration-5",line1Points:"",line2Points:"",line1Length:0,line2Length:0,defaultColor:["#3f96a5","#3f96a5"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{afterAutoResizeMixinInit(){const{calcSVGData:e}=this;e()},calcSVGData(){const{width:e,height:t}=this;let n=[[0,.2*t],[.18*e,.2*t],[.2*e,.4*t],[.25*e,.4*t],[.27*e,.6*t],[.72*e,.6*t],[.75*e,.4*t],[.8*e,.4*t],[.82*e,.2*t],[e,.2*t]],r=[[.3*e,.8*t],[.7*e,.8*t]];const i=R(n),o=R(r);n=n.map(e=>e.join(",")).join(" "),r=r.map(e=>e.join(",")).join(" "),this.line1Points=n,this.line2Points=r,this.line1Length=i,this.line2Length=o},onResize(){const{calcSVGData:e}=this;e()},mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var rt=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-decoration-5"},[n("svg",{attrs:{width:e.width,height:e.height}},[n("polyline",{attrs:{fill:"transparent",stroke:e.mergedColor[0],"stroke-width":"3",points:e.line1Points}},[n("animate",{attrs:{attributeName:"stroke-dasharray",attributeType:"XML",from:"0, "+e.line1Length/2+", 0, "+e.line1Length/2,to:"0, 0, "+e.line1Length+", 0",dur:e.dur+"s",begin:"0s",calcMode:"spline",keyTimes:"0;1",keySplines:"0.4,1,0.49,0.98",repeatCount:"indefinite"}})]),e._v(" "),n("polyline",{attrs:{fill:"transparent",stroke:e.mergedColor[1],"stroke-width":"2",points:e.line2Points}},[n("animate",{attrs:{attributeName:"stroke-dasharray",attributeType:"XML",from:"0, "+e.line2Length/2+", 0, "+e.line2Length/2,to:"0, 0, "+e.line2Length+", 0",dur:e.dur+"s",begin:"0s",calcMode:"spline",keyTimes:"0;1",keySplines:".4,1,.49,.98",repeatCount:"indefinite"}})])])])};rt._withStripped=!0;const it=a({render:rt,staticRenderFns:[]},(function(e){e&&e("data-v-183f85bc_0",{source:".dv-decoration-5 {\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-decoration-5 {\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),nt,void 0,!1,void 0,!1,l,void 0,void 0);function ot(e){e.component(it.name,it)}const at={name:"DvDecoration6",mixins:[i],props:{color:{type:Array,default:()=>[]}},data:()=>({ref:"decoration-6",svgWH:[300,35],svgScale:[1,1],rowNum:1,rowPoints:40,rectWidth:7,halfRectWidth:3.5,points:[],heights:[],minHeights:[],randoms:[],defaultColor:["#7acaec","#7acaec"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{afterAutoResizeMixinInit(){const{calcSVGData:e}=this;e()},calcSVGData(){const{calcPointsPosition:e,calcScale:t}=this;e(),t()},calcPointsPosition(){const{svgWH:e,rowNum:n,rowPoints:r}=this,[i,o]=e,a=i/(r+1),s=o/(n+1);let l=new Array(n).fill(0).map((e,t)=>new Array(r).fill(0).map((e,n)=>[a*(n+1),s*(t+1)]));this.points=l.reduce((e,t)=>[...e,...t],[]);const d=this.heights=new Array(n*r).fill(0).map(e=>Math.random()>.8?t(.7*o,o):t(.2*o,.5*o));this.minHeights=new Array(n*r).fill(0).map((e,t)=>d[t]*Math.random()),this.randoms=new Array(n*r).fill(0).map(e=>Math.random()+1.5)},calcScale(){const{width:e,height:t,svgWH:n}=this,[r,i]=n;this.svgScale=[e/r,t/i]},onResize(){const{calcSVGData:e}=this;e()},mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var st=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-decoration-6"},[n("svg",{style:"transform:scale("+e.svgScale[0]+","+e.svgScale[1]+");",attrs:{width:e.svgWH[0]+"px",height:e.svgWH[1]+"px"}},[e._l(e.points,(function(t,r){return[n("rect",{key:r,attrs:{fill:e.mergedColor[Math.random()>.5?0:1],x:t[0]-e.halfRectWidth,y:t[1]-e.heights[r]/2,width:e.rectWidth,height:e.heights[r]}},[n("animate",{attrs:{attributeName:"y",values:t[1]-e.minHeights[r]/2+";"+(t[1]-e.heights[r]/2)+";"+(t[1]-e.minHeights[r]/2),dur:e.randoms[r]+"s",keyTimes:"0;0.5;1",calcMode:"spline",keySplines:"0.42,0,0.58,1;0.42,0,0.58,1",begin:"0s",repeatCount:"indefinite"}}),e._v(" "),n("animate",{attrs:{attributeName:"height",values:e.minHeights[r]+";"+e.heights[r]+";"+e.minHeights[r],dur:e.randoms[r]+"s",keyTimes:"0;0.5;1",calcMode:"spline",keySplines:"0.42,0,0.58,1;0.42,0,0.58,1",begin:"0s",repeatCount:"indefinite"}})])]}))],2)])};st._withStripped=!0;const lt=a({render:st,staticRenderFns:[]},(function(e){e&&e("data-v-a29c4fc2_0",{source:".dv-decoration-6 {\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-6 svg {\n  transform-origin: left top;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,0BAA0B;AAC5B",file:"main.vue",sourcesContent:[".dv-decoration-6 {\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-6 svg {\n  transform-origin: left top;\n}\n"]},media:void 0})}),at,void 0,!1,void 0,!1,l,void 0,void 0);function dt(e){e.component(lt.name,lt)}const ct={name:"DvDecoration7",props:{color:{type:Array,default:()=>[]}},data:()=>({defaultColor:["#1dc1f5","#1dc1f5"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var ut=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"dv-decoration-7"},[n("svg",{attrs:{width:"21px",height:"20px"}},[n("polyline",{attrs:{"stroke-width":"4",fill:"transparent",stroke:e.mergedColor[0],points:"10, 0 19, 10 10, 20"}}),e._v(" "),n("polyline",{attrs:{"stroke-width":"2",fill:"transparent",stroke:e.mergedColor[1],points:"2, 0 11, 10 2, 20"}})]),e._v(" "),e._t("default"),e._v(" "),n("svg",{attrs:{width:"21px",height:"20px"}},[n("polyline",{attrs:{"stroke-width":"4",fill:"transparent",stroke:e.mergedColor[0],points:"11, 0 2, 10 11, 20"}}),e._v(" "),n("polyline",{attrs:{"stroke-width":"2",fill:"transparent",stroke:e.mergedColor[1],points:"19, 0 10, 10 19, 20"}})])],2)};ut._withStripped=!0;const ht=a({render:ut,staticRenderFns:[]},(function(e){e&&e("data-v-b84d1f12_0",{source:".dv-decoration-7 {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,aAAa;EACb,WAAW;EACX,YAAY;EACZ,uBAAuB;EACvB,mBAAmB;AACrB",file:"main.vue",sourcesContent:[".dv-decoration-7 {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n}\n"]},media:void 0})}),ct,void 0,!1,void 0,!1,l,void 0,void 0);function ft(e){e.component(ht.name,ht)}const pt={name:"DvDecoration8",mixins:[i],props:{color:{type:Array,default:()=>[]},reverse:{type:Boolean,default:!1}},data:()=>({ref:"decoration-8",defaultColor:["#3f96a5","#3f96a5"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{xPos(e){const{reverse:t,width:n}=this;return t?n-e:e},mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var gt=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-decoration-8"},[n("svg",{attrs:{width:e.width,height:e.height}},[n("polyline",{attrs:{stroke:e.mergedColor[0],"stroke-width":"2",fill:"transparent",points:e.xPos(0)+", 0 "+e.xPos(30)+", "+e.height/2}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],"stroke-width":"2",fill:"transparent",points:e.xPos(20)+", 0 "+e.xPos(50)+", "+e.height/2+" "+e.xPos(e.width)+", "+e.height/2}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[1],fill:"transparent","stroke-width":"3",points:e.xPos(0)+", "+(e.height-3)+", "+e.xPos(200)+", "+(e.height-3)}})])])};gt._withStripped=!0;const vt=a({render:gt,staticRenderFns:[]},(function(e){e&&e("data-v-53cf43a5_0",{source:".dv-decoration-8 {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,aAAa;EACb,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-decoration-8 {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),pt,void 0,!1,void 0,!1,l,void 0,void 0);function mt(e){e.component(vt.name,vt)}const At={name:"DvDecoration9",mixins:[i],props:{color:{type:Array,default:()=>[]},dur:{type:Number,default:3}},data:()=>({ref:"decoration-9",polygonId:"decoration-9-polygon-"+r(),svgWH:[100,100],svgScale:[1,1],defaultColor:["rgba(3, 166, 224, 0.8)","rgba(3, 166, 224, 0.5)"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{afterAutoResizeMixinInit(){const{calcScale:e}=this;e()},calcScale(){const{width:e,height:t,svgWH:n}=this,[r,i]=n;this.svgScale=[e/r,t/i]},onResize(){const{calcScale:e}=this;e()},mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])},fade:Pe},mounted(){const{mergeColor:e}=this;e()}};var Ct=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-decoration-9"},[n("svg",{style:"transform:scale("+e.svgScale[0]+","+e.svgScale[1]+");",attrs:{width:e.svgWH[0]+"px",height:e.svgWH[1]+"px"}},[n("defs",[n("polygon",{attrs:{id:e.polygonId,points:"15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5"}})]),e._v(" "),n("circle",{attrs:{cx:"50",cy:"50",r:"45",fill:"transparent",stroke:e.mergedColor[1],"stroke-width":"10","stroke-dasharray":"80, 100, 30, 100"}},[n("animateTransform",{attrs:{attributeName:"transform",type:"rotate",values:"0 50 50;360 50 50",dur:e.dur+"s",repeatCount:"indefinite"}})],1),e._v(" "),n("circle",{attrs:{cx:"50",cy:"50",r:"45",fill:"transparent",stroke:e.mergedColor[0],"stroke-width":"6","stroke-dasharray":"50, 66, 100, 66"}},[n("animateTransform",{attrs:{attributeName:"transform",type:"rotate",values:"0 50 50;-360 50 50",dur:e.dur+"s",repeatCount:"indefinite"}})],1),e._v(" "),n("circle",{attrs:{cx:"50",cy:"50",r:"38",fill:"transparent",stroke:e.fade(e.mergedColor[1]||e.defaultColor[1],30),"stroke-width":"1","stroke-dasharray":"5, 1"}}),e._v(" "),e._l(new Array(20).fill(0),(function(t,r){return n("use",{key:r,attrs:{"xlink:href":"#"+e.polygonId,stroke:e.mergedColor[1],fill:Math.random()>.4?"transparent":e.mergedColor[0]}},[n("animateTransform",{attrs:{attributeName:"transform",type:"rotate",values:"0 50 50;360 50 50",dur:e.dur+"s",begin:r*e.dur/20+"s",repeatCount:"indefinite"}})],1)})),e._v(" "),n("circle",{attrs:{cx:"50",cy:"50",r:"26",fill:"transparent",stroke:e.fade(e.mergedColor[1]||e.defaultColor[1],30),"stroke-width":"1","stroke-dasharray":"5, 1"}})],2),e._v(" "),e._t("default")],2)};Ct._withStripped=!0;const bt=a({render:Ct,staticRenderFns:[]},(function(e){e&&e("data-v-b47f91a8_0",{source:".dv-decoration-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dv-decoration-9 svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  transform-origin: left top;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,0BAA0B;AAC5B",file:"main.vue",sourcesContent:[".dv-decoration-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dv-decoration-9 svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  transform-origin: left top;\n}\n"]},media:void 0})}),At,void 0,!1,void 0,!1,l,void 0,void 0);function yt(e){e.component(bt.name,bt)}const xt={name:"DvDecoration10",mixins:[i],props:{color:{type:Array,default:()=>[]}},data(){const e=r();return{ref:"decoration-10",animationId1:"d10ani1"+e,animationId2:"d10ani2"+e,animationId3:"d10ani3"+e,animationId4:"d10ani4"+e,animationId5:"d10ani5"+e,animationId6:"d10ani6"+e,animationId7:"d10ani7"+e,defaultColor:["#00c2ff","rgba(0, 194, 255, 0.3)"],mergedColor:[]}},watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])}},mounted(){const{mergeColor:e}=this;e()}};var wt=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-decoration-10"},[n("svg",{attrs:{width:e.width,height:e.height}},[n("polyline",{attrs:{stroke:e.mergedColor[1],"stroke-width":"2",points:"0, "+e.height/2+" "+e.width+", "+e.height/2}}),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],"stroke-width":"2",points:"5, "+e.height/2+" "+(.2*e.width-3)+", "+e.height/2,"stroke-dasharray":"0, "+.2*e.width,fill:"freeze"}},[n("animate",{attrs:{id:e.animationId2,attributeName:"stroke-dasharray",values:"0, "+.2*e.width+";"+.2*e.width+", 0;",dur:"3s",begin:e.animationId1+".end",fill:"freeze"}}),e._v(" "),n("animate",{attrs:{attributeName:"stroke-dasharray",values:.2*e.width+", 0;0, "+.2*e.width,dur:"0.01s",begin:e.animationId7+".end",fill:"freeze"}})]),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],"stroke-width":"2",points:.2*e.width+3+", "+e.height/2+" "+(.8*e.width-3)+", "+e.height/2,"stroke-dasharray":"0, "+.6*e.width}},[n("animate",{attrs:{id:e.animationId4,attributeName:"stroke-dasharray",values:"0, "+.6*e.width+";"+.6*e.width+", 0",dur:"3s",begin:e.animationId3+".end + 1s",fill:"freeze"}}),e._v(" "),n("animate",{attrs:{attributeName:"stroke-dasharray",values:.6*e.width+", 0;0, "+.6*e.width,dur:"0.01s",begin:e.animationId7+".end",fill:"freeze"}})]),e._v(" "),n("polyline",{attrs:{stroke:e.mergedColor[0],"stroke-width":"2",points:.8*e.width+3+", "+e.height/2+" "+(e.width-5)+", "+e.height/2,"stroke-dasharray":"0, "+.2*e.width}},[n("animate",{attrs:{id:e.animationId6,attributeName:"stroke-dasharray",values:"0, "+.2*e.width+";"+.2*e.width+", 0",dur:"3s",begin:e.animationId5+".end + 1s",fill:"freeze"}}),e._v(" "),n("animate",{attrs:{attributeName:"stroke-dasharray",values:.2*e.width+", 0;0, "+.3*e.width,dur:"0.01s",begin:e.animationId7+".end",fill:"freeze"}})]),e._v(" "),n("circle",{attrs:{cx:"2",cy:e.height/2,r:"2",fill:e.mergedColor[1]}},[n("animate",{attrs:{id:e.animationId1,attributeName:"fill",values:e.mergedColor[1]+";"+e.mergedColor[0],begin:"0s;"+e.animationId7+".end",dur:"0.3s",fill:"freeze"}})]),e._v(" "),n("circle",{attrs:{cx:.2*e.width,cy:e.height/2,r:"2",fill:e.mergedColor[1]}},[n("animate",{attrs:{id:e.animationId3,attributeName:"fill",values:e.mergedColor[1]+";"+e.mergedColor[0],begin:e.animationId2+".end",dur:"0.3s",fill:"freeze"}}),e._v(" "),n("animate",{attrs:{attributeName:"fill",values:e.mergedColor[1]+";"+e.mergedColor[1],dur:"0.01s",begin:e.animationId7+".end",fill:"freeze"}})]),e._v(" "),n("circle",{attrs:{cx:.8*e.width,cy:e.height/2,r:"2",fill:e.mergedColor[1]}},[n("animate",{attrs:{id:e.animationId5,attributeName:"fill",values:e.mergedColor[1]+";"+e.mergedColor[0],begin:e.animationId4+".end",dur:"0.3s",fill:"freeze"}}),e._v(" "),n("animate",{attrs:{attributeName:"fill",values:e.mergedColor[1]+";"+e.mergedColor[1],dur:"0.01s",begin:e.animationId7+".end",fill:"freeze"}})]),e._v(" "),n("circle",{attrs:{cx:e.width-2,cy:e.height/2,r:"2",fill:e.mergedColor[1]}},[n("animate",{attrs:{id:e.animationId7,attributeName:"fill",values:e.mergedColor[1]+";"+e.mergedColor[0],begin:e.animationId6+".end",dur:"0.3s",fill:"freeze"}}),e._v(" "),n("animate",{attrs:{attributeName:"fill",values:e.mergedColor[1]+";"+e.mergedColor[1],dur:"0.01s",begin:e.animationId7+".end",fill:"freeze"}})])])])};wt._withStripped=!0;const kt=a({render:wt,staticRenderFns:[]},(function(e){e&&e("data-v-23172a05_0",{source:".dv-decoration-10 {\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;AACf",file:"main.vue",sourcesContent:[".dv-decoration-10 {\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n"]},media:void 0})}),xt,void 0,!1,void 0,!1,l,void 0,void 0);function Et(e){e.component(kt.name,kt)}const Bt={name:"DvDecoration11",mixins:[i],props:{color:{type:Array,default:()=>[]}},data:()=>({ref:"decoration-11",defaultColor:["#1a98fc","#2cf7fe"],mergedColor:[]}),watch:{color(){const{mergeColor:e}=this;e()}},methods:{mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])},fade:Pe},mounted(){const{mergeColor:e}=this;e()}};var Pt=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-decoration-11"},[n("svg",{attrs:{width:e.width,height:e.height}},[n("polygon",{attrs:{fill:e.fade(e.mergedColor[1]||e.defaultColor[1],10),stroke:e.mergedColor[1],points:"20 10, 25 4, 55 4 60 10"}}),e._v(" "),n("polygon",{attrs:{fill:e.fade(e.mergedColor[1]||e.defaultColor[1],10),stroke:e.mergedColor[1],points:"20 "+(e.height-10)+", 25 "+(e.height-4)+", 55 "+(e.height-4)+" 60 "+(e.height-10)}}),e._v(" "),n("polygon",{attrs:{fill:e.fade(e.mergedColor[1]||e.defaultColor[1],10),stroke:e.mergedColor[1],points:e.width-20+" 10, "+(e.width-25)+" 4, "+(e.width-55)+" 4 "+(e.width-60)+" 10"}}),e._v(" "),n("polygon",{attrs:{fill:e.fade(e.mergedColor[1]||e.defaultColor[1],10),stroke:e.mergedColor[1],points:e.width-20+" "+(e.height-10)+", "+(e.width-25)+" "+(e.height-4)+", "+(e.width-55)+" "+(e.height-4)+" "+(e.width-60)+" "+(e.height-10)}}),e._v(" "),n("polygon",{attrs:{fill:e.fade(e.mergedColor[0]||e.defaultColor[0],20),stroke:e.mergedColor[0],points:"\n        20 10, 5 "+e.height/2+" 20 "+(e.height-10)+"\n        "+(e.width-20)+" "+(e.height-10)+" "+(e.width-5)+" "+e.height/2+" "+(e.width-20)+" 10\n      "}}),e._v(" "),n("polyline",{attrs:{fill:"transparent",stroke:e.fade(e.mergedColor[0]||e.defaultColor[0],70),points:"25 18, 15 "+e.height/2+" 25 "+(e.height-18)}}),e._v(" "),n("polyline",{attrs:{fill:"transparent",stroke:e.fade(e.mergedColor[0]||e.defaultColor[0],70),points:e.width-25+" 18, "+(e.width-15)+" "+e.height/2+" "+(e.width-25)+" "+(e.height-18)}})]),e._v(" "),n("div",{staticClass:"decoration-content"},[e._t("default")],2)])};Pt._withStripped=!0;const _t=a({render:Pt,staticRenderFns:[]},(function(e){e&&e("data-v-53895fd4_0",{source:".dv-decoration-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.dv-decoration-11 .decoration-content {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;AACf;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB",file:"main.vue",sourcesContent:[".dv-decoration-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.dv-decoration-11 .decoration-content {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"]},media:void 0})}),Bt,void 0,!1,void 0,!1,l,void 0,void 0);function St(e){e.component(_t.name,_t)}const Ot={name:"DvDecoration12",mixins:[i],props:{color:{type:Array,default:()=>[]},scanDur:{type:Number,default:3},haloDur:{type:Number,default:2}},data(){const e=r();return{ref:"decoration-12",gId:"decoration-12-g-"+e,gradientId:"decoration-12-gradient-"+e,defaultColor:["#2783ce","#2cf7fe"],mergedColor:[],pathD:[],pathColor:[],circleR:[],splitLinePoints:[],arcD:[],segment:30,sectorAngle:Math.PI/3,ringNum:3,ringWidth:1,showSplitLine:!0}},watch:{color(){const{mergeColor:e}=this;e()}},computed:{x(){const{width:e}=this;return e/2},y(){const{height:e}=this;return e/2}},methods:{init(){const{mergeColor:e,calcPathD:t,calcPathColor:n,calcCircleR:r,calcSplitLinePoints:i,calcArcD:o}=this;e(),t(),n(),r(),i(),o()},mergeColor(){const{color:e,defaultColor:t}=this;this.mergedColor=D(j(t,!0),e||[])},calcPathD(){const{x:e,y:t,width:n,segment:r,sectorAngle:i}=this,o=-Math.PI/2,a=i/r,s=n/4;let l=M(e,t,s,o);this.pathD=new Array(r).fill("").map((n,r)=>{const i=M(e,t,s,o-(r+1)*a).map(e=>e.toFixed(5)),d=`M${l.join(",")} A${s}, ${s} 0 0 0 ${i.join(",")}`;return l=i,d})},calcPathColor(){const{mergedColor:[e],segment:t}=this,n=100/(t-1);this.pathColor=new Array(t).fill(e).map((t,r)=>Pe(e,100-r*n))},calcCircleR(){const{segment:e,ringNum:t,width:n,ringWidth:r}=this,i=(n/2-r/2)/t;this.circleR=new Array(t).fill(0).map((e,t)=>i*(t+1))},calcSplitLinePoints(){const{x:e,y:t,width:n}=this,r=Math.PI/6,i=n/2;this.splitLinePoints=new Array(6).fill("").map((n,o)=>{const a=r*(o+1),s=a+Math.PI,l=M(e,t,i,a),d=M(e,t,i,s);return`${l.join(",")} ${d.join(",")}`})},calcArcD(){const{x:e,y:t,width:n}=this,r=Math.PI/6,i=n/2-1;this.arcD=new Array(4).fill("").map((n,o)=>{const a=r*(3*o+1),s=a+r,l=M(e,t,i,a),d=M(e,t,i,s);return`M${l.join(",")} A${e}, ${t} 0 0 1 ${d.join(",")}`})},afterAutoResizeMixinInit(){const{init:e}=this;e()},fade:Pe}};var It=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-decoration-12"},[n("svg",{attrs:{width:e.width,height:e.height}},[n("defs",[n("g",{attrs:{id:e.gId}},e._l(e.pathD,(function(t,r){return n("path",{key:t,attrs:{stroke:e.pathColor[r],"stroke-width":e.width/2,fill:"transparent",d:t}})})),0),e._v(" "),n("radialGradient",{attrs:{id:e.gradientId,cx:"50%",cy:"50%",r:"50%"}},[n("stop",{attrs:{offset:"0%","stop-color":"transparent","stop-opacity":"1"}}),e._v(" "),n("stop",{attrs:{offset:"100%","stop-color":e.fade(e.mergedColor[1]||e.defaultColor[1],30),"stop-opacity":"1"}})],1)],1),e._v(" "),e._l(e.circleR,(function(t){return n("circle",{key:t,attrs:{r:t,cx:e.x,cy:e.y,stroke:e.mergedColor[1],"stroke-width":.5,fill:"transparent"}})})),e._v(" "),n("circle",{attrs:{r:"1",cx:e.x,cy:e.y,stroke:"transparent",fill:"url(#"+e.gradientId+")"}},[n("animate",{attrs:{attributeName:"r",values:"1;"+e.width/2,dur:e.haloDur+"s",repeatCount:"indefinite"}}),e._v(" "),n("animate",{attrs:{attributeName:"opacity",values:"1;0",dur:e.haloDur+"s",repeatCount:"indefinite"}})]),e._v(" "),n("circle",{attrs:{r:"2",cx:e.x,cy:e.y,fill:e.mergedColor[1]}}),e._v(" "),e.showSplitLine?n("g",e._l(e.splitLinePoints,(function(t){return n("polyline",{key:t,attrs:{points:t,stroke:e.mergedColor[1],"stroke-width":.5,opacity:"0.5"}})})),0):e._e(),e._v(" "),e._l(e.arcD,(function(t){return n("path",{key:t,attrs:{d:t,stroke:e.mergedColor[1],"stroke-width":"2",fill:"transparent"}})})),e._v(" "),n("use",{attrs:{"xlink:href":"#"+e.gId}},[n("animateTransform",{attrs:{attributeName:"transform",type:"rotate",values:"0, "+e.x+" "+e.y+";360, "+e.x+" "+e.y,dur:e.scanDur+"s",repeatCount:"indefinite"}})],1)],2),e._v(" "),n("div",{staticClass:"decoration-content"},[e._t("default")],2)])};It._withStripped=!0;const Wt=a({render:It,staticRenderFns:[]},(function(e){e&&e("data-v-70099a0c_0",{source:".dv-decoration-12 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.dv-decoration-12 .decoration-content {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;AACf;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB",file:"main.vue",sourcesContent:[".dv-decoration-12 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.dv-decoration-12 .decoration-content {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"]},media:void 0})}),Ot,void 0,!1,void 0,!1,l,void 0,void 0);function Lt(e){e.component(Wt.name,Wt)}var jt=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")};var Mt=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},Ft=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.bezierCurveToPolyline=p,t.getBezierCurveLength=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5;if(!e)return console.error("getBezierCurveLength: Missing parameters!"),!1;if(!(e instanceof Array))return console.error("getBezierCurveLength: Parameter bezierCurve must be an array!"),!1;if("number"!=typeof t)return console.error("getBezierCurveLength: Parameter precision must be a number!"),!1;var n=l(e,t),r=n.segmentPoints,i=u([r])[0],o=c(i);return o},t.default=void 0;var n=y(W),r=y(P),i=Math.sqrt,o=Math.pow,a=Math.ceil,s=Math.abs;function l(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5,n=e.length-1,i=e[0],o=e[n][2],a=e.slice(1),s=a.map((function(e,t){var n=0===t?i:a[t-1][2];return d.apply(void 0,[n].concat((0,r.default)(e)))})),l=new Array(n).fill(50),c=h(s,l),u=f(c,s,a,t);return u.segmentPoints.push(o),u}function d(e,t,n,r){return function(i){var a=1-i,s=o(a,3),l=o(a,2),d=o(i,3),c=o(i,2);return[e[0]*s+3*t[0]*i*l+3*n[0]*c*a+r[0]*d,e[1]*s+3*t[1]*i*l+3*n[1]*c*a+r[1]*d]}}function c(e){return e.reduce((function(e,t){return e+t}),0)}function u(e){return e.map((function(e,t){return new Array(e.length-1).fill(0).map((function(t,r){return a=e[r],s=e[r+1],l=(0,n.default)(a,2),d=l[0],c=l[1],u=(0,n.default)(s,2),h=u[0],f=u[1],i(o(d-h,2)+o(c-f,2));var a,s,l,d,c,u,h,f}))}))}function h(e,t){return e.map((function(e,n){var r=1/t[n];return new Array(t[n]).fill("").map((function(t,n){return e(n*r)}))}))}function f(e,t,n,r){var i=4,o=1,l=function(){var l=e.reduce((function(e,t){return e+t.length}),0);e.forEach((function(e,t){return e.push(n[t][2])}));var d=u(e),f=d.reduce((function(e,t){return e+t.length}),0),p=d.map((function(e){return c(e)})),g=c(p),v=g/f;if(function(e,t){return e.map((function(e){return e.map((function(e){return s(e-t)}))})).map((function(e){return c(e)})).reduce((function(e,t){return e+t}),0)}(d,v)<=r)return"break";l=a(v/r*l*1.1);var m=p.map((function(e){return a(e/g*l)}));e=h(t,m),l=e.reduce((function(e,t){return e+t.length}),0);var A=JSON.parse(JSON.stringify(e));A.forEach((function(e,t){return e.push(n[t][2])})),f=(d=u(A)).reduce((function(e,t){return e+t.length}),0),p=d.map((function(e){return c(e)})),g=c(p),v=g/f;var C=1/l/10;t.forEach((function(t,n){for(var r=m[n],o=new Array(r).fill("").map((function(e,t){return t/m[n]})),a=0;a<i;a++)for(var s=u([e[n]])[0].map((function(e){return e-v})),l=0,d=0;d<r;d++){if(0===d)return;l+=s[d-1],o[d]-=C*l,o[d]>1&&(o[d]=1),o[d]<0&&(o[d]=0),e[n][d]=t(o[d])}})),i*=4,o++};do{if("break"===l())break}while(i<=1025);return{segmentPoints:e=e.reduce((function(e,t){return e.concat(t)}),[]),cycles:o,rounds:i}}function p(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5;if(!e)return console.error("bezierCurveToPolyline: Missing parameters!"),!1;if(!(e instanceof Array))return console.error("bezierCurveToPolyline: Parameter bezierCurve must be an array!"),!1;if("number"!=typeof t)return console.error("bezierCurveToPolyline: Parameter precision must be a number!"),!1;var n=l(e,t),r=n.segmentPoints;return r}var g=p;t.default=g}));C(Ft);Ft.bezierCurveToPolyline,Ft.getBezierCurveLength;var Dt=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=y(W),r=y(P);function i(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:.25,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:.25,o=e.length;if(!(o<3||t>=o)){var a=t-1;a<0&&(a=n?o+a:0);var s=t+1;s>=o&&(s=n?s-o:o-1);var l=t+2;l>=o&&(l=n?l-o:o-1);var d=e[a],c=e[t],u=e[s],h=e[l];return[[c[0]+r*(u[0]-d[0]),c[1]+r*(u[1]-d[1])],[u[0]-i*(h[0]-c[0]),u[1]-i*(h[1]-c[1])]]}}function o(e,t){var n=e[0],r=e.slice(-1)[0];return e.push([a(r[1],r[2]),a(n[0],t),t]),e}function a(e,t){var r=(0,n.default)(e,2),i=r[0],o=r[1],a=(0,n.default)(t,2),s=a[0],l=a[1];return[s+(s-i),l+(l-o)]}var s=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.25,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:.25;if(!(e instanceof Array))return console.error("polylineToBezierCurve: Parameter polyline must be an array!"),!1;if(e.length<=2)return console.error("polylineToBezierCurve: Converting to a curve requires at least 3 points!"),!1;var s=e[0],l=e.length-1,d=new Array(l).fill(0).map((function(o,s){return[].concat((0,r.default)(i(e,s,t,n,a)),[e[s+1]])}));return t&&o(d,s),d.unshift(e[0]),d};t.default=s}));C(Dt);var Rt=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"bezierCurveToPolyline",{enumerable:!0,get:function(){return Ft.bezierCurveToPolyline}}),Object.defineProperty(t,"getBezierCurveLength",{enumerable:!0,get:function(){return Ft.getBezierCurveLength}}),Object.defineProperty(t,"polylineToBezierCurve",{enumerable:!0,get:function(){return n.default}}),t.default=void 0;var n=y(Dt),r={bezierCurveToPolyline:Ft.bezierCurveToPolyline,getBezierCurveLength:Ft.getBezierCurveLength,polylineToBezierCurve:n.default};t.default=r}));C(Rt);var Gt=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.drawPolylinePath=r,t.drawBezierCurvePath=i,t.default=void 0;var n=y(P);function r(e,t){var r=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=arguments.length>3&&void 0!==arguments[3]&&arguments[3];if(!e||t.length<2)return!1;r&&e.beginPath(),t.forEach((function(t,r){return t&&(0===r?e.moveTo.apply(e,(0,n.default)(t)):e.lineTo.apply(e,(0,n.default)(t)))})),i&&e.closePath()}function i(e,t){var r=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=arguments.length>3&&void 0!==arguments[3]&&arguments[3],o=arguments.length>4&&void 0!==arguments[4]&&arguments[4];if(!e||!t)return!1;i&&e.beginPath(),r&&e.moveTo.apply(e,(0,n.default)(r)),t.forEach((function(t){return t&&e.bezierCurveTo.apply(e,(0,n.default)(t[0]).concat((0,n.default)(t[1]),(0,n.default)(t[2])))})),o&&e.closePath()}var o={drawPolylinePath:r,drawBezierCurvePath:i};t.default=o}));C(Gt);Gt.drawPolylinePath,Gt.drawBezierCurvePath;var zt=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.extendNewGraph=function(e,t){if(!e||!t)return void console.error("ExtendNewGraph Missing Parameters!");if(!t.shape)return void console.error("Required attribute of shape to extendNewGraph!");if(!t.validator)return void console.error("Required function of validator to extendNewGraph!");if(!t.draw)return void console.error("Required function of draw to extendNewGraph!");A.set(e,t)},t.default=t.text=t.bezierCurve=t.smoothline=t.polyline=t.regPolygon=t.sector=t.arc=t.ring=t.rect=t.ellipse=t.circle=void 0;var n=y(P),r=y(W),i=y(Rt),o=i.default.polylineToBezierCurve,a=i.default.bezierCurveToPolyline,s={shape:{rx:0,ry:0,r:0},validator:function(e){var t=e.shape,n=t.rx,r=t.ry,i=t.r;return"number"==typeof n&&"number"==typeof r&&"number"==typeof i||(console.error("Circle shape configuration is abnormal!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape;n.beginPath();var i=r.rx,o=r.ry,a=r.r;n.arc(i,o,a>0?a:.01,0,2*Math.PI),n.fill(),n.stroke(),n.closePath()},hoverCheck:function(e,t){var n=t.shape,r=n.rx,i=n.ry,o=n.r;return(0,L.checkPointIsInCircle)(e,r,i,o)},setGraphCenter:function(e,t){var n=t.shape,r=t.style,i=n.rx,o=n.ry;r.graphCenter=[i,o]},move:function(e,t){var n=e.movementX,r=e.movementY,i=t.shape;this.attr("shape",{rx:i.rx+n,ry:i.ry+r})}};t.circle=s;var l={shape:{rx:0,ry:0,hr:0,vr:0},validator:function(e){var t=e.shape,n=t.rx,r=t.ry,i=t.hr,o=t.vr;return"number"==typeof n&&"number"==typeof r&&"number"==typeof i&&"number"==typeof o||(console.error("Ellipse shape configuration is abnormal!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape;n.beginPath();var i=r.rx,o=r.ry,a=r.hr,s=r.vr;n.ellipse(i,o,a>0?a:.01,s>0?s:.01,0,0,2*Math.PI),n.fill(),n.stroke(),n.closePath()},hoverCheck:function(e,t){var n=t.shape,r=n.rx,i=n.ry,o=n.hr,a=n.vr,s=Math.max(o,a),l=Math.min(o,a),d=Math.sqrt(s*s-l*l),c=[r-d,i],u=[r+d,i];return(0,L.getTwoPointDistance)(e,c)+(0,L.getTwoPointDistance)(e,u)<=2*s},setGraphCenter:function(e,t){var n=t.shape,r=t.style,i=n.rx,o=n.ry;r.graphCenter=[i,o]},move:function(e,t){var n=e.movementX,r=e.movementY,i=t.shape;this.attr("shape",{rx:i.rx+n,ry:i.ry+r})}};t.ellipse=l;var d={shape:{x:0,y:0,w:0,h:0},validator:function(e){var t=e.shape,n=t.x,r=t.y,i=t.w,o=t.h;return"number"==typeof n&&"number"==typeof r&&"number"==typeof i&&"number"==typeof o||(console.error("Rect shape configuration is abnormal!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape;n.beginPath();var i=r.x,o=r.y,a=r.w,s=r.h;n.rect(i,o,a,s),n.fill(),n.stroke(),n.closePath()},hoverCheck:function(e,t){var n=t.shape,r=n.x,i=n.y,o=n.w,a=n.h;return(0,L.checkPointIsInRect)(e,r,i,o,a)},setGraphCenter:function(e,t){var n=t.shape,r=t.style,i=n.x,o=n.y,a=n.w,s=n.h;r.graphCenter=[i+a/2,o+s/2]},move:function(e,t){var n=e.movementX,r=e.movementY,i=t.shape;this.attr("shape",{x:i.x+n,y:i.y+r})}};t.rect=d;var c={shape:{rx:0,ry:0,r:0},validator:function(e){var t=e.shape,n=t.rx,r=t.ry,i=t.r;return"number"==typeof n&&"number"==typeof r&&"number"==typeof i||(console.error("Ring shape configuration is abnormal!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape;n.beginPath();var i=r.rx,o=r.ry,a=r.r;n.arc(i,o,a>0?a:.01,0,2*Math.PI),n.stroke(),n.closePath()},hoverCheck:function(e,t){var n=t.shape,r=t.style,i=n.rx,o=n.ry,a=n.r,s=r.lineWidth/2,l=a-s,d=a+s,c=(0,L.getTwoPointDistance)(e,[i,o]);return c>=l&&c<=d},setGraphCenter:function(e,t){var n=t.shape,r=t.style,i=n.rx,o=n.ry;r.graphCenter=[i,o]},move:function(e,t){var n=e.movementX,r=e.movementY,i=t.shape;this.attr("shape",{rx:i.rx+n,ry:i.ry+r})}};t.ring=c;var u={shape:{rx:0,ry:0,r:0,startAngle:0,endAngle:0,clockWise:!0},validator:function(e){var t=e.shape;return!["rx","ry","r","startAngle","endAngle"].find((function(e){return"number"!=typeof t[e]}))||(console.error("Arc shape configuration is abnormal!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape;n.beginPath();var i=r.rx,o=r.ry,a=r.r,s=r.startAngle,l=r.endAngle,d=r.clockWise;n.arc(i,o,a>0?a:.001,s,l,!d),n.stroke(),n.closePath()},hoverCheck:function(e,t){var n=t.shape,r=t.style,i=n.rx,o=n.ry,a=n.r,s=n.startAngle,l=n.endAngle,d=n.clockWise,c=r.lineWidth/2,u=a-c,h=a+c;return!(0,L.checkPointIsInSector)(e,i,o,u,s,l,d)&&(0,L.checkPointIsInSector)(e,i,o,h,s,l,d)},setGraphCenter:function(e,t){var n=t.shape,r=t.style,i=n.rx,o=n.ry;r.graphCenter=[i,o]},move:function(e,t){var n=e.movementX,r=e.movementY,i=t.shape;this.attr("shape",{rx:i.rx+n,ry:i.ry+r})}};t.arc=u;var h={shape:{rx:0,ry:0,r:0,startAngle:0,endAngle:0,clockWise:!0},validator:function(e){var t=e.shape;return!["rx","ry","r","startAngle","endAngle"].find((function(e){return"number"!=typeof t[e]}))||(console.error("Sector shape configuration is abnormal!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape;n.beginPath();var i=r.rx,o=r.ry,a=r.r,s=r.startAngle,l=r.endAngle,d=r.clockWise;n.arc(i,o,a>0?a:.01,s,l,!d),n.lineTo(i,o),n.closePath(),n.stroke(),n.fill()},hoverCheck:function(e,t){var n=t.shape,r=n.rx,i=n.ry,o=n.r,a=n.startAngle,s=n.endAngle,l=n.clockWise;return(0,L.checkPointIsInSector)(e,r,i,o,a,s,l)},setGraphCenter:function(e,t){var n=t.shape,r=t.style,i=n.rx,o=n.ry;r.graphCenter=[i,o]},move:function(e,t){var n=e.movementX,r=e.movementY,i=t.shape,o=i.rx,a=i.ry;this.attr("shape",{rx:o+n,ry:a+r})}};t.sector=h;var f={shape:{rx:0,ry:0,r:0,side:0},validator:function(e){var t=e.shape,n=t.side;return["rx","ry","r","side"].find((function(e){return"number"!=typeof t[e]}))?(console.error("RegPolygon shape configuration is abnormal!"),!1):!(n<3)||(console.error("RegPolygon at least trigon!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape,i=t.cache;n.beginPath();var o=r.rx,a=r.ry,s=r.r,l=r.side;if(!i.points||i.rx!==o||i.ry!==a||i.r!==s||i.side!==l){var d=(0,L.getRegularPolygonPoints)(o,a,s,l);Object.assign(i,{points:d,rx:o,ry:a,r:s,side:l})}var c=i.points;(0,Gt.drawPolylinePath)(n,c),n.closePath(),n.stroke(),n.fill()},hoverCheck:function(e,t){var n=t.cache.points;return(0,L.checkPointIsInPolygon)(e,n)},setGraphCenter:function(e,t){var n=t.shape,r=t.style,i=n.rx,o=n.ry;r.graphCenter=[i,o]},move:function(e,t){var n=e.movementX,i=e.movementY,o=t.shape,a=t.cache,s=o.rx,l=o.ry;a.rx+=n,a.ry+=i,this.attr("shape",{rx:s+n,ry:l+i}),a.points=a.points.map((function(e){var t=(0,r.default)(e,2),o=t[0],a=t[1];return[o+n,a+i]}))}};t.regPolygon=f;var p={shape:{points:[],close:!1},validator:function(e){return e.shape.points instanceof Array||(console.error("Polyline points should be an array!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape,i=t.style.lineWidth;n.beginPath();var o=r.points,a=r.close;1===i&&(o=(0,L.eliminateBlur)(o)),(0,Gt.drawPolylinePath)(n,o),a?(n.closePath(),n.fill(),n.stroke()):n.stroke()},hoverCheck:function(e,t){var n=t.shape,r=t.style,i=n.points,o=n.close,a=r.lineWidth;return o?(0,L.checkPointIsInPolygon)(e,i):(0,L.checkPointIsNearPolyline)(e,i,a)},setGraphCenter:function(e,t){var n=t.shape,r=t.style,i=n.points;r.graphCenter=i[0]},move:function(e,t){var n=e.movementX,i=e.movementY,o=t.shape.points.map((function(e){var t=(0,r.default)(e,2),o=t[0],a=t[1];return[o+n,a+i]}));this.attr("shape",{points:o})}};t.polyline=p;var g={shape:{points:[],close:!1},validator:function(e){return e.shape.points instanceof Array||(console.error("Smoothline points should be an array!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape,i=t.cache,s=r.points,l=r.close;if(!i.points||i.points.toString()!==s.toString()){var d=o(s,l),c=a(d);Object.assign(i,{points:(0,L.deepClone)(s,!0),bezierCurve:d,hoverPoints:c})}var u=i.bezierCurve;n.beginPath(),(0,Gt.drawBezierCurvePath)(n,u.slice(1),u[0]),l?(n.closePath(),n.fill(),n.stroke()):n.stroke()},hoverCheck:function(e,t){var n=t.cache,r=t.shape,i=t.style,o=n.hoverPoints,a=r.close,s=i.lineWidth;return a?(0,L.checkPointIsInPolygon)(e,o):(0,L.checkPointIsNearPolyline)(e,o,s)},setGraphCenter:function(e,t){var n=t.shape,r=t.style,i=n.points;r.graphCenter=i[0]},move:function(e,t){var i=e.movementX,o=e.movementY,a=t.shape,s=t.cache,l=a.points.map((function(e){var t=(0,r.default)(e,2),n=t[0],a=t[1];return[n+i,a+o]}));s.points=l;var d=(0,r.default)(s.bezierCurve[0],2),c=d[0],u=d[1],h=s.bezierCurve.slice(1);s.bezierCurve=[[c+i,u+o]].concat((0,n.default)(h.map((function(e){return e.map((function(e){var t=(0,r.default)(e,2),n=t[0],a=t[1];return[n+i,a+o]}))})))),s.hoverPoints=s.hoverPoints.map((function(e){var t=(0,r.default)(e,2),n=t[0],a=t[1];return[n+i,a+o]})),this.attr("shape",{points:l})}};t.smoothline=g;var v={shape:{points:[],close:!1},validator:function(e){return e.shape.points instanceof Array||(console.error("BezierCurve points should be an array!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape,i=t.cache,o=r.points,s=r.close;if(!i.points||i.points.toString()!==o.toString()){var l=a(o,20);Object.assign(i,{points:(0,L.deepClone)(o,!0),hoverPoints:l})}n.beginPath(),(0,Gt.drawBezierCurvePath)(n,o.slice(1),o[0]),s?(n.closePath(),n.fill(),n.stroke()):n.stroke()},hoverCheck:function(e,t){var n=t.cache,r=t.shape,i=t.style,o=n.hoverPoints,a=r.close,s=i.lineWidth;return a?(0,L.checkPointIsInPolygon)(e,o):(0,L.checkPointIsNearPolyline)(e,o,s)},setGraphCenter:function(e,t){var n=t.shape,r=t.style,i=n.points;r.graphCenter=i[0]},move:function(e,t){var i=e.movementX,o=e.movementY,a=t.shape,s=t.cache,l=a.points,d=(0,r.default)(l[0],2),c=d[0],u=d[1],h=l.slice(1),f=[[c+i,u+o]].concat((0,n.default)(h.map((function(e){return e.map((function(e){var t=(0,r.default)(e,2),n=t[0],a=t[1];return[n+i,a+o]}))}))));s.points=f,s.hoverPoints=s.hoverPoints.map((function(e){var t=(0,r.default)(e,2),n=t[0],a=t[1];return[n+i,a+o]})),this.attr("shape",{points:f})}};t.bezierCurve=v;var m={shape:{content:"",position:[],maxWidth:void 0,rowGap:0},validator:function(e){var t=e.shape,n=t.content,r=t.position,i=t.rowGap;return"string"!=typeof n?(console.error("Text content should be a string!"),!1):r instanceof Array?"number"==typeof i||(console.error("Text rowGap should be a number!"),!1):(console.error("Text position should be an array!"),!1)},draw:function(e,t){var i=e.ctx,o=t.shape,a=o.content,s=o.position,l=o.maxWidth,d=o.rowGap,c=i.textBaseline,u=i.font,h=parseInt(u.replace(/\D/g,"")),f=s,p=(0,r.default)(f,2),g=p[0],v=p[1],m=(a=a.split("\n")).length,A=h+d,C=m*A-d,b=0;"middle"===c&&(b=C/2,v+=h/2),"bottom"===c&&(b=C,v+=h),s=new Array(m).fill(0).map((function(e,t){return[g,v+t*A-b]})),i.beginPath(),a.forEach((function(e,t){i.fillText.apply(i,[e].concat((0,n.default)(s[t]),[l])),i.strokeText.apply(i,[e].concat((0,n.default)(s[t]),[l]))})),i.closePath()},hoverCheck:function(e,t){t.shape,t.style;return!1},setGraphCenter:function(e,t){var r=t.shape,i=t.style,o=r.position;i.graphCenter=(0,n.default)(o)},move:function(e,t){var n=e.movementX,i=e.movementY,o=t.shape,a=(0,r.default)(o.position,2),s=a[0],l=a[1];this.attr("shape",{position:[s+n,l+i]})}};t.text=m;var A=new Map([["circle",s],["ellipse",l],["rect",d],["ring",c],["arc",u],["sector",h],["regPolygon",f],["polyline",p],["smoothline",g],["bezierCurve",v],["text",m]]),C=A;t.default=C}));C(zt);zt.extendNewGraph,zt.text,zt.bezierCurve,zt.smoothline,zt.polyline,zt.regPolygon,zt.sector,zt.arc,zt.ring,zt.rect,zt.ellipse,zt.circle;var Tt=b((function(e){var t=function(e){var t=Object.prototype,n=t.hasOwnProperty,r="function"==typeof Symbol?Symbol:{},i=r.iterator||"@@iterator",o=r.asyncIterator||"@@asyncIterator",a=r.toStringTag||"@@toStringTag";function s(e,t,n,r){var i=t&&t.prototype instanceof c?t:c,o=Object.create(i.prototype),a=new x(r||[]);return o._invoke=function(e,t,n){var r="suspendedStart";return function(i,o){if("executing"===r)throw new Error("Generator is already running");if("completed"===r){if("throw"===i)throw o;return k()}for(n.method=i,n.arg=o;;){var a=n.delegate;if(a){var s=C(a,n);if(s){if(s===d)continue;return s}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===r)throw r="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r="executing";var c=l(e,t,n);if("normal"===c.type){if(r=n.done?"completed":"suspendedYield",c.arg===d)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(r="completed",n.method="throw",n.arg=c.arg)}}}(e,n,a),o}function l(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}e.wrap=s;var d={};function c(){}function u(){}function h(){}var f={};f[i]=function(){return this};var p=Object.getPrototypeOf,g=p&&p(p(w([])));g&&g!==t&&n.call(g,i)&&(f=g);var v=h.prototype=c.prototype=Object.create(f);function m(e){["next","throw","return"].forEach((function(t){e[t]=function(e){return this._invoke(t,e)}}))}function A(e,t){var r;this._invoke=function(i,o){function a(){return new t((function(r,a){!function r(i,o,a,s){var d=l(e[i],e,o);if("throw"!==d.type){var c=d.arg,u=c.value;return u&&"object"==typeof u&&n.call(u,"__await")?t.resolve(u.__await).then((function(e){r("next",e,a,s)}),(function(e){r("throw",e,a,s)})):t.resolve(u).then((function(e){c.value=e,a(c)}),(function(e){return r("throw",e,a,s)}))}s(d.arg)}(i,o,r,a)}))}return r=r?r.then(a,a):a()}}function C(e,t){var n=e.iterator[t.method];if(void 0===n){if(t.delegate=null,"throw"===t.method){if(e.iterator.return&&(t.method="return",t.arg=void 0,C(e,t),"throw"===t.method))return d;t.method="throw",t.arg=new TypeError("The iterator does not provide a 'throw' method")}return d}var r=l(n,e.iterator,t.arg);if("throw"===r.type)return t.method="throw",t.arg=r.arg,t.delegate=null,d;var i=r.arg;return i?i.done?(t[e.resultName]=i.value,t.next=e.nextLoc,"return"!==t.method&&(t.method="next",t.arg=void 0),t.delegate=null,d):i:(t.method="throw",t.arg=new TypeError("iterator result is not an object"),t.delegate=null,d)}function b(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function y(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function x(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(b,this),this.reset(!0)}function w(e){if(e){var t=e[i];if(t)return t.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var r=-1,o=function t(){for(;++r<e.length;)if(n.call(e,r))return t.value=e[r],t.done=!1,t;return t.value=void 0,t.done=!0,t};return o.next=o}}return{next:k}}function k(){return{value:void 0,done:!0}}return u.prototype=v.constructor=h,h.constructor=u,h[a]=u.displayName="GeneratorFunction",e.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===u||"GeneratorFunction"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,h):(e.__proto__=h,a in e||(e[a]="GeneratorFunction")),e.prototype=Object.create(v),e},e.awrap=function(e){return{__await:e}},m(A.prototype),A.prototype[o]=function(){return this},e.AsyncIterator=A,e.async=function(t,n,r,i,o){void 0===o&&(o=Promise);var a=new A(s(t,n,r,i),o);return e.isGeneratorFunction(n)?a:a.next().then((function(e){return e.done?e.value:a.next()}))},m(v),v[a]="Generator",v[i]=function(){return this},v.toString=function(){return"[object Generator]"},e.keys=function(e){var t=[];for(var n in e)t.push(n);return t.reverse(),function n(){for(;t.length;){var r=t.pop();if(r in e)return n.value=r,n.done=!1,n}return n.done=!0,n}},e.values=w,x.prototype={constructor:x,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(y),!e)for(var t in this)"t"===t.charAt(0)&&n.call(this,t)&&!isNaN(+t.slice(1))&&(this[t]=void 0)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var t=this;function r(n,r){return a.type="throw",a.arg=e,t.next=n,r&&(t.method="next",t.arg=void 0),!!r}for(var i=this.tryEntries.length-1;i>=0;--i){var o=this.tryEntries[i],a=o.completion;if("root"===o.tryLoc)return r("end");if(o.tryLoc<=this.prev){var s=n.call(o,"catchLoc"),l=n.call(o,"finallyLoc");if(s&&l){if(this.prev<o.catchLoc)return r(o.catchLoc,!0);if(this.prev<o.finallyLoc)return r(o.finallyLoc)}else if(s){if(this.prev<o.catchLoc)return r(o.catchLoc,!0)}else{if(!l)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return r(o.finallyLoc)}}}},abrupt:function(e,t){for(var r=this.tryEntries.length-1;r>=0;--r){var i=this.tryEntries[r];if(i.tryLoc<=this.prev&&n.call(i,"finallyLoc")&&this.prev<i.finallyLoc){var o=i;break}}o&&("break"===e||"continue"===e)&&o.tryLoc<=t&&t<=o.finallyLoc&&(o=null);var a=o?o.completion:{};return a.type=e,a.arg=t,o?(this.method="next",this.next=o.finallyLoc,d):this.complete(a)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),d},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),y(n),d}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var i=r.arg;y(n)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(e,t,n){return this.delegate={iterator:w(e),resultName:t,nextLoc:n},"next"===this.method&&(this.arg=void 0),d}},e}(e.exports);try{regeneratorRuntime=t}catch(e){Function("r","regeneratorRuntime = r")(t)}}));function Yt(e,t,n,r,i,o,a){try{var s=e[o](a),l=s.value}catch(e){return void n(e)}s.done?t(l):Promise.resolve(l).then(r,i)}var Nt=function(e){return function(){var t=this,n=arguments;return new Promise((function(r,i){var o=e.apply(t,n);function a(e){Yt(o,r,i,a,s,"next",e)}function s(e){Yt(o,r,i,a,s,"throw",e)}a(void 0)}))}},Xt=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=y(P),r=y(jt),i=function e(t){(0,r.default)(this,e),this.colorProcessor(t);Object.assign(this,{fill:[0,0,0,1],stroke:[0,0,0,0],opacity:1,lineCap:null,lineJoin:null,lineDash:null,lineDashOffset:null,shadowBlur:0,shadowColor:[0,0,0,0],shadowOffsetX:0,shadowOffsetY:0,lineWidth:0,graphCenter:null,scale:null,rotate:null,translate:null,hoverCursor:"pointer",fontStyle:"normal",fontVarient:"normal",fontWeight:"normal",fontSize:10,fontFamily:"Arial",textAlign:"center",textBaseline:"middle",gradientColor:null,gradientType:"linear",gradientParams:null,gradientWith:"stroke",gradientStops:"auto",colors:null},t)};t.default=i,i.prototype.colorProcessor=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=t?Be.getColorFromRgbValue:Be.getRgbaValue,r=["fill","stroke","shadowColor"],i=Object.keys(e),o=i.filter((function(e){return r.find((function(t){return t===e}))}));o.forEach((function(t){return e[t]=n(e[t])}));var a=e.gradientColor,s=e.colors;if(a&&(e.gradientColor=a.map((function(e){return n(e)}))),s){var l=Object.keys(s);l.forEach((function(e){return s[e]=n(s[e])}))}},i.prototype.initStyle=function(e){!function(e,t){e.save();var r=t.graphCenter,i=t.rotate,o=t.scale,a=t.translate;if(!(r instanceof Array))return;e.translate.apply(e,(0,n.default)(r)),i&&e.rotate(i*Math.PI/180);o instanceof Array&&e.scale.apply(e,(0,n.default)(o));a&&e.translate.apply(e,(0,n.default)(a));e.translate(-r[0],-r[1])}(e,this),function(e,t){var r=t.fill,i=t.stroke,a=t.shadowColor,s=t.opacity;o.forEach((function(n){(n||"number"==typeof n)&&(e[n]=t[n])})),r=(0,n.default)(r),i=(0,n.default)(i),a=(0,n.default)(a),r[3]*=s,i[3]*=s,a[3]*=s,e.fillStyle=(0,Be.getColorFromRgbValue)(r),e.strokeStyle=(0,Be.getColorFromRgbValue)(i),e.shadowColor=(0,Be.getColorFromRgbValue)(a);var l=t.lineDash,d=t.shadowBlur;l&&(l=l.map((function(e){return e>=0?e:0})),e.setLineDash(l));"number"==typeof d&&(e.shadowBlur=d>0?d:.001);var c=t.fontStyle,u=t.fontVarient,h=t.fontWeight,f=t.fontSize,p=t.fontFamily;e.font=c+" "+u+" "+h+" "+f+"px "+p}(e,this),function(e,t){if(!function(e){var t=e.gradientColor,n=e.gradientParams,r=e.gradientType,i=e.gradientWith,o=e.gradientStops;if(!t||!n)return!1;if(1===t.length)return console.warn("The gradient needs to provide at least two colors"),!1;if("linear"!==r&&"radial"!==r)return console.warn("GradientType only supports linear or radial, current value is "+r),!1;var a=n.length;if("linear"===r&&4!==a||"radial"===r&&6!==a)return console.warn("The expected length of gradientParams is "+("linear"===r?"4":"6")),!1;if("fill"!==i&&"stroke"!==i)return console.warn("GradientWith only supports fill or stroke, current value is "+i),!1;if("auto"!==o&&!(o instanceof Array))return console.warn("gradientStops only supports 'auto' or Number Array ([0, .5, 1]), current value is "+o),!1;return!0}(t))return;var r=t.gradientColor,i=t.gradientParams,o=t.gradientType,a=t.gradientWith,s=t.gradientStops,l=t.opacity;r=(r=r.map((function(e){var t=e[3]*l,r=(0,n.default)(e);return r[3]=t,r}))).map((function(e){return(0,Be.getColorFromRgbValue)(e)})),"auto"===s&&(s=function(e){var t=1/(e.length-1);return e.map((function(e,n){return t*n}))}(r));var d=e["create".concat(o.slice(0,1).toUpperCase()+o.slice(1),"Gradient")].apply(e,(0,n.default)(i));s.forEach((function(e,t){return d.addColorStop(e,r[t])})),e["".concat(a,"Style")]=d}(e,this)};var o=["lineCap","lineJoin","lineDashOffset","shadowOffsetX","shadowOffsetY","lineWidth","textAlign","textBaseline"];i.prototype.restoreTransform=function(e){e.restore()},i.prototype.update=function(e){this.colorProcessor(e),Object.assign(this,e)},i.prototype.getStyle=function(){var e=(0,L.deepClone)(this,!0);return this.colorProcessor(e,!0),e}}));C(Xt);var $t=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.easeInOutBounce=t.easeOutBounce=t.easeInBounce=t.easeInOutElastic=t.easeOutElastic=t.easeInElastic=t.easeInOutBack=t.easeOutBack=t.easeInBack=t.easeInOutQuint=t.easeOutQuint=t.easeInQuint=t.easeInOutQuart=t.easeOutQuart=t.easeInQuart=t.easeInOutCubic=t.easeOutCubic=t.easeInCubic=t.easeInOutQuad=t.easeOutQuad=t.easeInQuad=t.easeInOutSine=t.easeOutSine=t.easeInSine=t.linear=void 0;var n=[[[0,1],"",[.33,.67]],[[1,0],[.67,.33]]];t.linear=n;var r=[[[0,1]],[[.538,.564],[.169,.912],[.88,.196]],[[1,0]]];t.easeInSine=r;var i=[[[0,1]],[[.444,.448],[.169,.736],[.718,.16]],[[1,0]]];t.easeOutSine=i;var o=[[[0,1]],[[.5,.5],[.2,1],[.8,0]],[[1,0]]];t.easeInOutSine=o;var a=[[[0,1]],[[.55,.584],[.231,.904],[.868,.264]],[[1,0]]];t.easeInQuad=a;var s=[[[0,1]],[[.413,.428],[.065,.816],[.76,.04]],[[1,0]]];t.easeOutQuad=s;var l=[[[0,1]],[[.5,.5],[.3,.9],[.7,.1]],[[1,0]]];t.easeInOutQuad=l;var d=[[[0,1]],[[.679,.688],[.366,.992],[.992,.384]],[[1,0]]];t.easeInCubic=d;var c=[[[0,1]],[[.321,.312],[.008,.616],[.634,.008]],[[1,0]]];t.easeOutCubic=c;var u=[[[0,1]],[[.5,.5],[.3,1],[.7,0]],[[1,0]]];t.easeInOutCubic=u;var h=[[[0,1]],[[.812,.74],[.611,.988],[1.013,.492]],[[1,0]]];t.easeInQuart=h;var f=[[[0,1]],[[.152,.244],[.001,.448],[.285,-.02]],[[1,0]]];t.easeOutQuart=f;var p=[[[0,1]],[[.5,.5],[.4,1],[.6,0]],[[1,0]]];t.easeInOutQuart=p;var g=[[[0,1]],[[.857,.856],[.714,1],[1,.712]],[[1,0]]];t.easeInQuint=g;var v=[[[0,1]],[[.108,.2],[.001,.4],[.214,-.012]],[[1,0]]];t.easeOutQuint=v;var m=[[[0,1]],[[.5,.5],[.5,1],[.5,0]],[[1,0]]];t.easeInOutQuint=m;var A=[[[0,1]],[[.667,.896],[.38,1.184],[.955,.616]],[[1,0]]];t.easeInBack=A;var C=[[[0,1]],[[.335,.028],[.061,.22],[.631,-.18]],[[1,0]]];t.easeOutBack=C;var b=[[[0,1]],[[.5,.5],[.4,1.4],[.6,-.4]],[[1,0]]];t.easeInOutBack=b;var y=[[[0,1]],[[.474,.964],[.382,.988],[.557,.952]],[[.619,1.076],[.565,1.088],[.669,1.08]],[[.77,.916],[.712,.924],[.847,.904]],[[.911,1.304],[.872,1.316],[.961,1.34]],[[1,0]]];t.easeInElastic=y;var x=[[[0,1]],[[.073,-.32],[.034,-.328],[.104,-.344]],[[.191,.092],[.11,.06],[.256,.08]],[[.31,-.076],[.26,-.068],[.357,-.076]],[[.432,.032],[.362,.028],[.683,-.004]],[[1,0]]];t.easeOutElastic=x;var w=[[[0,1]],[[.21,.94],[.167,.884],[.252,.98]],[[.299,1.104],[.256,1.092],[.347,1.108]],[[.5,.496],[.451,.672],[.548,.324]],[[.696,-.108],[.652,-.112],[.741,-.124]],[[.805,.064],[.756,.012],[.866,.096]],[[1,0]]];t.easeInOutElastic=w;var k=[[[0,1]],[[.148,1],[.075,.868],[.193,.848]],[[.326,1],[.276,.836],[.405,.712]],[[.6,1],[.511,.708],[.671,.348]],[[1,0]]];t.easeInBounce=k;var E=[[[0,1]],[[.357,.004],[.27,.592],[.376,.252]],[[.604,-.004],[.548,.312],[.669,.184]],[[.82,0],[.749,.184],[.905,.132]],[[1,0]]];t.easeOutBounce=E;var B=[[[0,1]],[[.102,1],[.05,.864],[.117,.86]],[[.216,.996],[.208,.844],[.227,.808]],[[.347,.996],[.343,.8],[.48,.292]],[[.635,.004],[.511,.676],[.656,.208]],[[.787,0],[.76,.2],[.795,.144]],[[.905,-.004],[.899,.164],[.944,.144]],[[1,0]]];t.easeInOutBounce=B;var P=new Map([["linear",n],["easeInSine",r],["easeOutSine",i],["easeInOutSine",o],["easeInQuad",a],["easeOutQuad",s],["easeInOutQuad",l],["easeInCubic",d],["easeOutCubic",c],["easeInOutCubic",u],["easeInQuart",h],["easeOutQuart",f],["easeInOutQuart",p],["easeInQuint",g],["easeOutQuint",v],["easeInOutQuint",m],["easeInBack",A],["easeOutBack",C],["easeInOutBack",b],["easeInElastic",y],["easeOutElastic",x],["easeInOutElastic",w],["easeInBounce",k],["easeOutBounce",E],["easeInOutBounce",B]]);t.default=P}));C($t);$t.easeInOutBounce,$t.easeOutBounce,$t.easeInBounce,$t.easeInOutElastic,$t.easeOutElastic,$t.easeInElastic,$t.easeInOutBack,$t.easeOutBack,$t.easeInBack,$t.easeInOutQuint,$t.easeOutQuint,$t.easeInQuint,$t.easeInOutQuart,$t.easeOutQuart,$t.easeInQuart,$t.easeInOutCubic,$t.easeOutCubic,$t.easeInCubic,$t.easeInOutQuad,$t.easeOutQuad,$t.easeInQuad,$t.easeInOutSine,$t.easeOutSine,$t.easeInSine,$t.linear;var Ht=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.transition=o,t.injectNewCurve=function(e,t){if(!e||!t)return void console.error("InjectNewCurve Missing Parameters!");i.default.set(e,t)},t.default=void 0;var n=y(W),r=y(_),i=y($t);function o(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:30,i=arguments.length>4&&void 0!==arguments[4]&&arguments[4];if(!a.apply(void 0,arguments))return!1;try{var o=s(e),c=l(o,r);return i&&"number"!=typeof n?u(t,n,c):d(t,n,c)}catch(e){return console.warn("Transition parameter may be abnormal!"),[n]}}function a(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:30;if(!e||!1===t||!1===n||!o)return console.error("transition: Missing Parameters!"),!1;if((0,r.default)(t)!==(0,r.default)(n))return console.error("transition: Inconsistent Status Types!"),!1;var a=(0,r.default)(n);return"string"!==a&&"boolean"!==a&&e.length?(i.default.has(e)||e instanceof Array||console.warn("transition: Transition curve not found, default curve will be used!"),!0):(console.error("transition: Unsupported Data Type of State!"),!1)}function s(e){return i.default.has(e)?i.default.get(e):e instanceof Array?e:i.default.get("linear")}function l(e,t){var r=1/(t-1);return new Array(t).fill(0).map((function(e,t){return t*r})).map((function(t){return function(e,t){var r=function(e,t){var n=e.length-1,r="",i="";e.findIndex((function(o,a){if(a!==n){r=o,i=e[a+1];var s=r[0][0],l=i[0][0];return t>=s&&t<l}}));var o=r[0],a=r[2]||r[0],s=i[1]||i[0],l=i[0];return[o,a,s,l]}(e,t),i=function(e,t){var n=e[0][0],r=e[3][0];return(t-n)/(r-n)}(r,t);return function(e,t){var r=(0,n.default)(e,4),i=(0,n.default)(r[0],2)[1],o=(0,n.default)(r[1],2)[1],a=(0,n.default)(r[2],2)[1],s=(0,n.default)(r[3],2)[1],l=Math.pow,d=1-t,c=i*l(d,3),u=3*o*t*l(d,2),h=3*a*l(t,2)*d,f=s*l(t,3);return 1-(c+u+h+f)}(r,i)}(e,t)}))}function d(e,t,n){var r="object";return"number"==typeof e&&(r="number"),e instanceof Array&&(r="array"),"number"===r?function(e,t,n){var r=t-e;return n.map((function(t){return e+r*t}))}(e,t,n):"array"===r?c(e,t,n):"object"===r?function(e,t,n){var r=Object.keys(t),i=r.map((function(t){return e[t]})),o=r.map((function(e){return t[e]}));return c(i,o,n).map((function(e){var t={};return e.forEach((function(e,n){return t[r[n]]=e})),t}))}(e,t,n):n.map((function(e){return t}))}function c(e,t,n){var r=t.map((function(t,n){return"number"==typeof t&&t-e[n]}));return n.map((function(n){return r.map((function(r,i){return!1===r?t[i]:e[i]+r*n}))}))}function u(e,t,n){var i=d(e,t,n),o=function(o){var a=e[o],s=t[o];if("object"!==(0,r.default)(s))return"continue";var l=u(a,s,n);i.forEach((function(e,t){return e[o]=l[t]}))};for(var a in t)o(a);return i}var h=o;t.default=h}));C(Ht);Ht.transition,Ht.injectNewCurve;var Qt=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=y(Tt),r=y(Nt),i=y(_),o=y(P),a=y(jt),s=y(Xt),l=y(Ht),d=function e(t,n){(0,a.default)(this,e);var r={visible:!0,drag:!1,hover:!1,index:1,animationDelay:0,animationFrame:30,animationCurve:"linear",animationPause:!1,hoverRect:null,mouseEnter:null,mouseOuter:null,click:null};(n=(0,L.deepClone)(n,!0)).shape||(n.shape={}),n.style||(n.style={});var i=Object.assign({},t.shape,n.shape);Object.assign(r,n,{status:"static",animationRoot:[],animationKeys:[],animationFrameState:[],cache:{}}),Object.assign(this,t,r),this.shape=i,this.style=new s.default(n.style),this.addedProcessor()};function c(e){return new Promise((function(t){setTimeout(t,e)}))}t.default=d,d.prototype.addedProcessor=function(){"function"==typeof this.setGraphCenter&&this.setGraphCenter(null,this),"function"==typeof this.added&&this.added(this)},d.prototype.drawProcessor=function(e,t){var n=e.ctx;t.style.initStyle(n),"function"==typeof this.beforeDraw&&this.beforeDraw(this,e),t.draw(e,t),"function"==typeof this.drawed&&this.drawed(this,e),t.style.restoreTransform(n)},d.prototype.hoverCheckProcessor=function(e,t){var n=t.hoverRect,r=t.style,i=t.hoverCheck,a=r.graphCenter,s=r.rotate,l=r.scale,d=r.translate;return a&&(s&&(e=(0,L.getRotatePointPos)(-s,e,a)),l&&(e=(0,L.getScalePointPos)(l.map((function(e){return 1/e})),e,a)),d&&(e=(0,L.getTranslatePointPos)(d.map((function(e){return-1*e})),e))),n?L.checkPointIsInRect.apply(void 0,[e].concat((0,o.default)(n))):i(e,this)},d.prototype.moveProcessor=function(e){this.move(e,this),"function"==typeof this.beforeMove&&this.beforeMove(e,this),"function"==typeof this.setGraphCenter&&this.setGraphCenter(e,this),"function"==typeof this.moved&&this.moved(e,this)},d.prototype.attr=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;if(!e||void 0===t)return!1;var n="object"===(0,i.default)(this[e]);n&&(t=(0,L.deepClone)(t,!0));var r=this.render;"style"===e?this.style.update(t):n?Object.assign(this[e],t):this[e]=t,"index"===e&&r.sortGraphsByIndex(),r.drawAllGraph()},d.prototype.animation=function(){var e=(0,r.default)(n.default.mark((function e(t,i){var o,a,s,d,u,h,f,p,g,v=arguments;return n.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(o=v.length>2&&void 0!==v[2]&&v[2],"shape"===t||"style"===t){e.next=4;break}return console.error("Only supported shape and style animation!"),e.abrupt("return");case 4:if(i=(0,L.deepClone)(i,!0),"style"===t&&this.style.colorProcessor(i),a=this[t],s=Object.keys(i),d={},s.forEach((function(e){return d[e]=a[e]})),u=this.animationFrame,h=this.animationCurve,f=this.animationDelay,p=(0,l.default)(h,d,i,u,!0),this.animationRoot.push(a),this.animationKeys.push(s),this.animationFrameState.push(p),!o){e.next=17;break}return e.abrupt("return");case 17:if(!(f>0)){e.next=20;break}return e.next=20,c(f);case 20:return g=this.render,e.abrupt("return",new Promise(function(){var e=(0,r.default)(n.default.mark((function e(t){return n.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,g.launchAnimation();case 2:t();case 3:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()));case 22:case"end":return e.stop()}}),e,this)})));return function(t,n){return e.apply(this,arguments)}}(),d.prototype.turnNextAnimationFrame=function(e){var t=this.animationDelay,n=this.animationRoot,r=this.animationKeys,i=this.animationFrameState;this.animationPause||Date.now()-e<t||(n.forEach((function(e,t){r[t].forEach((function(n){e[n]=i[t][0][n]}))})),i.forEach((function(e,t){e.shift();var i=0===e.length;i&&(n[t]=null),i&&(r[t]=null)})),this.animationFrameState=i.filter((function(e){return e.length})),this.animationRoot=n.filter((function(e){return e})),this.animationKeys=r.filter((function(e){return e})))},d.prototype.animationEnd=function(){var e=this.animationFrameState,t=this.animationKeys,n=this.animationRoot,r=this.render;return n.forEach((function(n,r){var i=t[r],o=e[r].pop();i.forEach((function(e){return n[e]=o[e]}))})),this.animationFrameState=[],this.animationKeys=[],this.animationRoot=[],r.drawAllGraph()},d.prototype.pauseAnimation=function(){this.attr("animationPause",!0)},d.prototype.playAnimation=function(){var e=this.render;return this.attr("animationPause",!1),new Promise(function(){var t=(0,r.default)(n.default.mark((function t(r){return n.default.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,e.launchAnimation();case 2:r();case 3:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}())},d.prototype.delProcessor=function(e){var t=this,n=e.graphs,r=n.findIndex((function(e){return e===t}));-1!==r&&("function"==typeof this.beforeDelete&&this.beforeDelete(this),n.splice(r,1,null),"function"==typeof this.deleted&&this.deleted(this))}}));C(Qt);var Ut=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=y(Mt),r=y(P),i=y(jt),o=y(Be),a=y(Rt),s=y(zt),l=y(Qt);function d(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}var c=function e(t){if((0,i.default)(this,e),t){var n=t.getContext("2d"),r=t.clientWidth,s=t.clientHeight,l=[r,s];t.setAttribute("width",r),t.setAttribute("height",s),this.ctx=n,this.area=l,this.animationStatus=!1,this.graphs=[],this.color=o.default,this.bezierCurve=a.default,t.addEventListener("mousedown",h.bind(this)),t.addEventListener("mousemove",f.bind(this)),t.addEventListener("mouseup",p.bind(this))}else console.error("CRender Missing parameters!")};function u(e,t){var n=this.graphs;!function(e){return e.find((function(e){return!e.animationPause&&e.animationFrameState.length}))}(n)?e():(n.forEach((function(e){return e.turnNextAnimationFrame(t)})),this.drawAllGraph(),requestAnimationFrame(u.bind(this,e,t)))}function h(e){var t=this.graphs.find((function(e){return"hover"===e.status}));t&&(t.status="active")}function f(e){var t=[e.offsetX,e.offsetY],n=this.graphs,r=n.find((function(e){return"active"===e.status||"drag"===e.status}));if(r){if(!r.drag)return;return"function"!=typeof r.move?void console.error("No move method is provided, cannot be dragged!"):(r.moveProcessor(e),void(r.status="drag"))}var i=n.find((function(e){return"hover"===e.status})),o=n.filter((function(e){return e.hover&&("function"==typeof e.hoverCheck||e.hoverRect)})).find((function(e){return e.hoverCheckProcessor(t,e)}));document.body.style.cursor=o?o.style.hoverCursor:"default";var a=!1,s=!1;if(i&&(a="function"==typeof i.mouseOuter),o&&(s="function"==typeof o.mouseEnter),o||i){if(!o&&i)return a&&i.mouseOuter(e,i),void(i.status="static");if(!o||o!==i)return o&&!i?(s&&o.mouseEnter(e,o),void(o.status="hover")):void(o&&i&&o!==i&&(a&&i.mouseOuter(e,i),i.status="static",s&&o.mouseEnter(e,o),o.status="hover"))}}function p(e){var t=this.graphs,n=t.find((function(e){return"active"===e.status})),r=t.find((function(e){return"drag"===e.status}));n&&"function"==typeof n.click&&n.click(e,n),t.forEach((function(e){return e&&(e.status="static")})),n&&(n.status="hover"),r&&(r.status="hover")}t.default=c,c.prototype.clearArea=function(){var e,t=this.area;(e=this.ctx).clearRect.apply(e,[0,0].concat((0,r.default)(t)))},c.prototype.add=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.name;if(t){var n=s.default.get(t);if(n){var r=new l.default(n,e);if(r.validator(r))return r.render=this,this.graphs.push(r),this.sortGraphsByIndex(),this.drawAllGraph(),r}else console.warn("No corresponding graph configuration found!")}else console.error("add Missing parameters!")},c.prototype.sortGraphsByIndex=function(){this.graphs.sort((function(e,t){return e.index>t.index?1:e.index===t.index?0:e.index<t.index?-1:void 0}))},c.prototype.delGraph=function(e){"function"==typeof e.delProcessor&&(e.delProcessor(this),this.graphs=this.graphs.filter((function(e){return e})),this.drawAllGraph())},c.prototype.delAllGraph=function(){var e=this;this.graphs.forEach((function(t){return t.delProcessor(e)})),this.graphs=this.graphs.filter((function(e){return e})),this.drawAllGraph()},c.prototype.drawAllGraph=function(){var e=this;this.clearArea(),this.graphs.filter((function(e){return e&&e.visible})).forEach((function(t){return t.drawProcessor(e,t)}))},c.prototype.launchAnimation=function(){var e=this;if(!this.animationStatus)return this.animationStatus=!0,new Promise((function(t){u.call(e,(function(){e.animationStatus=!1,t()}),Date.now())}))},c.prototype.clone=function(e){var t=e.style.getStyle(),r=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?d(r,!0).forEach((function(t){(0,n.default)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):d(r).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},e,{style:t});return delete r.render,r=(0,L.deepClone)(r,!0),this.add(r)}}));C(Ut);var Vt=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"CRender",{enumerable:!0,get:function(){return n.default}}),Object.defineProperty(t,"extendNewGraph",{enumerable:!0,get:function(){return zt.extendNewGraph}}),t.default=void 0;var n=y(Ut),r=n.default;t.default=r})),qt=C(Vt),Zt=y(Mt),Kt=y(P);function Jt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function en(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Jt(n,!0).forEach((function(t){(0,Zt.default)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Jt(n).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var tn={shape:{rx:0,ry:0,ir:0,or:0,startAngle:0,endAngle:0,clockWise:!0},validator:function(e){var t=e.shape;return!["rx","ry","ir","or","startAngle","endAngle"].find((function(e){return"number"!=typeof t[e]}))||(console.error("Pie shape configuration is abnormal!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape;n.beginPath();var i=r.rx,o=r.ry,a=r.ir,s=r.or,l=r.startAngle,d=r.endAngle,c=r.clockWise;i=parseInt(i)+.5,o=parseInt(o)+.5,n.arc(i,o,a>0?a:0,l,d,!c);var u=(0,L.getCircleRadianPoint)(i,o,s,d).map((function(e){return parseInt(e)+.5})),h=(0,L.getCircleRadianPoint)(i,o,a,l).map((function(e){return parseInt(e)+.5}));n.lineTo.apply(n,(0,Kt.default)(u)),n.arc(i,o,s>0?s:0,d,l,c),n.lineTo.apply(n,(0,Kt.default)(h)),n.closePath(),n.stroke(),n.fill()}},nn={shape:{rx:0,ry:0,r:0,startAngle:0,endAngle:0,gradientStartAngle:null,gradientEndAngle:null},validator:function(e){var t=e.shape;return!["rx","ry","r","startAngle","endAngle"].find((function(e){return"number"!=typeof t[e]}))||(console.error("AgArc shape configuration is abnormal!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape,i=t.style.gradient;1===(i=i.map((function(e){return(0,Be.getColorFromRgbValue)(e)}))).length&&(i=[i[0],i[0]]);var o=i.length-1,a=r.gradientStartAngle,s=r.gradientEndAngle,l=r.startAngle,d=r.endAngle,c=r.r,u=r.rx,h=r.ry;null===a&&(a=l),null===s&&(s=d);var f=(s-a)/o;f===2*Math.PI&&(f=2*Math.PI-.001);for(var p=0;p<o;p++){n.beginPath();var g=(0,L.getCircleRadianPoint)(u,h,c,l+f*p),v=(0,L.getCircleRadianPoint)(u,h,c,l+f*(p+1)),m=(0,F.getLinearGradientColor)(n,g,v,[i[p],i[p+1]]),A=l+f*p,C=l+f*(p+1),b=!1;if(C>d&&(C=d,b=!0),n.arc(u,h,c,A,C),n.strokeStyle=m,n.stroke(),b)break}}},rn={shape:{number:[],content:"",position:[0,0],toFixed:0,rowGap:0,formatter:null},validator:function(e){var t=e.shape,n=t.number,r=t.content,i=t.position;return n instanceof Array&&"string"==typeof r&&i instanceof Array||(console.error("NumberText shape configuration is abnormal!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape,i=r.number,o=r.content,a=r.toFixed,s=r.rowGap,l=r.formatter,d=o.split("{nt}"),c="";d.forEach((function(e,t){var n=i[t]||"";"number"==typeof n&&(n=n.toFixed(a),"function"==typeof l&&(n=l(n))),c+=e+(n||"")})),zt.text.draw({ctx:n},{shape:en({},r,{content:c,rowGap:s})})}},on={shape:{x:0,y:0,w:0,h:0},validator:function(e){var t=e.shape,n=t.x,r=t.y,i=t.w,o=t.h;return"number"==typeof n&&"number"==typeof r&&"number"==typeof i&&"number"==typeof o||(console.error("lineIcon shape configuration is abnormal!"),!1)},draw:function(e,t){var n=e.ctx,r=t.shape;n.beginPath();var i=r.x,o=r.y,a=r.w,s=r.h/2;n.strokeStyle=n.fillStyle,n.moveTo(i,o+s),n.lineTo(i+a,o+s),n.lineWidth=1,n.stroke(),n.beginPath();var l=s-10;l<=0&&(l=3),n.arc(i+a/2,o+s,l,0,2*Math.PI),n.lineWidth=5,n.stroke(),n.fillStyle="#fff",n.fill()},hoverCheck:function(e,t){var n=t.shape,r=n.x,i=n.y,o=n.w,a=n.h;return(0,L.checkPointIsInRect)(e,r,i,o,a)},setGraphCenter:function(e,t){var n=t.shape,r=t.style,i=n.x,o=n.y,a=n.w,s=n.h;r.graphCenter=[i+a/2,o+s/2]}};(0,Vt.extendNewGraph)("pie",tn),(0,Vt.extendNewGraph)("agArc",nn),(0,Vt.extendNewGraph)("numberText",rn),(0,Vt.extendNewGraph)("lineIcon",on);var an=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.colorConfig=void 0;t.colorConfig=["#37a2da","#32c5e9","#67e0e3","#9fe6b8","#ffdb5c","#ff9f7f","#fb7293","#e062ae","#e690d1","#e7bcf3","#9d96f5","#8378ea","#96bfff"]}));C(an);an.colorConfig;var sn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.gridConfig=void 0;t.gridConfig={left:"10%",right:"10%",top:60,bottom:60,style:{fill:"rgba(0, 0, 0, 0)"},rLevel:-30,animationCurve:"easeOutCubic",animationFrame:30}}));C(sn);sn.gridConfig;var ln=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.yAxisConfig=t.xAxisConfig=void 0;t.xAxisConfig={name:"",show:!0,position:"bottom",nameGap:15,nameLocation:"end",nameTextStyle:{fill:"#333",fontSize:10},min:"20%",max:"20%",interval:null,minInterval:null,maxInterval:null,boundaryGap:null,splitNumber:5,axisLine:{show:!0,style:{stroke:"#333",lineWidth:1}},axisTick:{show:!0,style:{stroke:"#333",lineWidth:1}},axisLabel:{show:!0,formatter:null,style:{fill:"#333",fontSize:10,rotate:0}},splitLine:{show:!1,style:{stroke:"#d4d4d4",lineWidth:1}},rLevel:-20,animationCurve:"easeOutCubic",animationFrame:50};t.yAxisConfig={name:"",show:!0,position:"left",nameGap:15,nameLocation:"end",nameTextStyle:{fill:"#333",fontSize:10},min:"20%",max:"20%",interval:null,minInterval:null,maxInterval:null,boundaryGap:null,splitNumber:5,axisLine:{show:!0,style:{stroke:"#333",lineWidth:1}},axisTick:{show:!0,style:{stroke:"#333",lineWidth:1}},axisLabel:{show:!0,formatter:null,style:{fill:"#333",fontSize:10,rotate:0}},splitLine:{show:!0,style:{stroke:"#d4d4d4",lineWidth:1}},rLevel:-20,animationCurve:"easeOutCubic",animationFrame:50}}));C(ln);ln.yAxisConfig,ln.xAxisConfig;var dn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.titleConfig=void 0;t.titleConfig={show:!0,text:"",offset:[0,-20],style:{fill:"#333",fontSize:17,fontWeight:"bold",textAlign:"center",textBaseline:"bottom"},rLevel:20,animationCurve:"easeOutCubic",animationFrame:50}}));C(dn);dn.titleConfig;var cn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.lineConfig=void 0;t.lineConfig={show:!0,name:"",stack:"",smooth:!1,xAxisIndex:0,yAxisIndex:0,data:[],lineStyle:{lineWidth:1},linePoint:{show:!0,radius:2,style:{fill:"#fff",lineWidth:1}},lineArea:{show:!1,gradient:[],style:{opacity:.5}},label:{show:!1,position:"top",offset:[0,-10],formatter:null,style:{fontSize:10}},rLevel:10,animationCurve:"easeOutCubic",animationFrame:50}}));C(cn);cn.lineConfig;var un=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.barConfig=void 0;t.barConfig={show:!0,name:"",stack:"",shapeType:"normal",echelonOffset:10,barWidth:"auto",barGap:"30%",barCategoryGap:"20%",xAxisIndex:0,yAxisIndex:0,data:[],backgroundBar:{show:!1,width:"auto",style:{fill:"rgba(200, 200, 200, .4)"}},label:{show:!1,position:"top",offset:[0,-10],formatter:null,style:{fontSize:10}},gradient:{color:[],local:!0},barStyle:{},independentColor:!1,independentColors:[],rLevel:0,animationCurve:"easeOutCubic",animationFrame:50}}));C(un);un.barConfig;var hn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.pieConfig=void 0;var n={show:!0,name:"",radius:"50%",center:["50%","50%"],startAngle:-Math.PI/2,roseType:!1,roseSort:!0,roseIncrement:"auto",data:[],insideLabel:{show:!1,formatter:"{percent}%",style:{fontSize:10,fill:"#fff",textAlign:"center",textBaseline:"middle"}},outsideLabel:{show:!0,formatter:"{name}",style:{fontSize:11},labelLineBendGap:"20%",labelLineEndLength:50,labelLineStyle:{lineWidth:1}},pieStyle:{},percentToFixed:0,rLevel:10,animationDelayGap:60,animationCurve:"easeOutCubic",startAnimationCurve:"easeOutBack",animationFrame:50};t.pieConfig=n}));C(hn);hn.pieConfig;var fn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.radarAxisConfig=void 0;var n={show:!0,center:["50%","50%"],radius:"65%",startAngle:-Math.PI/2,splitNum:5,polygon:!1,axisLabel:{show:!0,labelGap:15,color:[],style:{fill:"#333"}},axisLine:{show:!0,color:[],style:{stroke:"#999",lineWidth:1}},splitLine:{show:!0,color:[],style:{stroke:"#d4d4d4",lineWidth:1}},splitArea:{show:!1,color:["#f5f5f5","#e6e6e6"],style:{}},rLevel:-10,animationCurve:"easeOutCubic",animationFrane:50};t.radarAxisConfig=n}));C(fn);fn.radarAxisConfig;var pn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.radarConfig=void 0;t.radarConfig={show:!0,name:"",data:[],radarStyle:{lineWidth:1},point:{show:!0,radius:2,style:{fill:"#fff"}},label:{show:!0,offset:[0,0],labelGap:5,formatter:null,style:{fontSize:10}},rLevel:10,animationCurve:"easeOutCubic",animationFrane:50}}));C(pn);pn.radarConfig;var gn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.gaugeConfig=void 0;var n={show:!0,name:"",radius:"60%",center:["50%","50%"],startAngle:-Math.PI/4*5,endAngle:Math.PI/4,min:0,max:100,splitNum:5,arcLineWidth:15,data:[],dataItemStyle:{},axisTick:{show:!0,tickLength:6,style:{stroke:"#999",lineWidth:1}},axisLabel:{show:!0,data:[],formatter:null,labelGap:5,style:{}},pointer:{show:!0,valueIndex:0,style:{scale:[1,1],fill:"#fb7293"}},details:{show:!1,formatter:null,offset:[0,0],valueToFixed:0,position:"center",style:{fontSize:20,fontWeight:"bold",textAlign:"center",textBaseline:"middle"}},backgroundArc:{show:!0,style:{stroke:"#e0e0e0"}},rLevel:10,animationCurve:"easeOutCubic",animationFrame:50};t.gaugeConfig=n}));C(gn);gn.gaugeConfig;var vn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.legendConfig=void 0;t.legendConfig={show:!0,orient:"horizontal",left:"auto",right:"auto",top:"auto",bottom:"auto",itemGap:10,iconWidth:25,iconHeight:10,selectAble:!0,data:[],textStyle:{fontFamily:"Arial",fontSize:13,fill:"#000"},iconStyle:{},textUnselectedStyle:{fontFamily:"Arial",fontSize:13,fill:"#999"},iconUnselectedStyle:{fill:"#999"},rLevel:20,animationCurve:"easeOutCubic",animationFrame:50}}));C(vn);vn.legendConfig;var mn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.changeDefaultConfig=function(e,t){if(!n["".concat(e,"Config")])return void console.warn("Change default config Error - Invalid key!");(0,F.deepMerge)(n["".concat(e,"Config")],t)},Object.defineProperty(t,"colorConfig",{enumerable:!0,get:function(){return an.colorConfig}}),Object.defineProperty(t,"gridConfig",{enumerable:!0,get:function(){return sn.gridConfig}}),Object.defineProperty(t,"xAxisConfig",{enumerable:!0,get:function(){return ln.xAxisConfig}}),Object.defineProperty(t,"yAxisConfig",{enumerable:!0,get:function(){return ln.yAxisConfig}}),Object.defineProperty(t,"titleConfig",{enumerable:!0,get:function(){return dn.titleConfig}}),Object.defineProperty(t,"lineConfig",{enumerable:!0,get:function(){return cn.lineConfig}}),Object.defineProperty(t,"barConfig",{enumerable:!0,get:function(){return un.barConfig}}),Object.defineProperty(t,"pieConfig",{enumerable:!0,get:function(){return hn.pieConfig}}),Object.defineProperty(t,"radarAxisConfig",{enumerable:!0,get:function(){return fn.radarAxisConfig}}),Object.defineProperty(t,"radarConfig",{enumerable:!0,get:function(){return pn.radarConfig}}),Object.defineProperty(t,"gaugeConfig",{enumerable:!0,get:function(){return gn.gaugeConfig}}),Object.defineProperty(t,"legendConfig",{enumerable:!0,get:function(){return vn.legendConfig}}),t.keys=void 0;var n={colorConfig:an.colorConfig,gridConfig:sn.gridConfig,xAxisConfig:ln.xAxisConfig,yAxisConfig:ln.yAxisConfig,titleConfig:dn.titleConfig,lineConfig:cn.lineConfig,barConfig:un.barConfig,pieConfig:hn.pieConfig,radarAxisConfig:fn.radarAxisConfig,radarConfig:pn.radarConfig,gaugeConfig:gn.gaugeConfig,legendConfig:vn.legendConfig};t.keys=["color","title","legend","xAxis","yAxis","grid","radarAxis","line","bar","pie","radar","gauge"]}));C(mn);mn.changeDefaultConfig,mn.keys;var An=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.mergeColor=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=(0,L.deepClone)(mn.colorConfig,!0),r=t.color,i=t.series;i||(i=[]);r||(r=[]);if(t.color=r=(0,F.deepMerge)(n,r),!i.length)return;var o=r.length;i.forEach((function(e,t){e.color||(e.color=r[t%o])}));var a=i.filter((function(e){return"pie"===e.type}));a.forEach((function(e){return e.data.forEach((function(e,t){return e.color=r[t%o]}))}));var s=i.filter((function(e){return"gauge"===e.type}));s.forEach((function(e){return e.data.forEach((function(e,t){return e.color=r[t%o]}))}));var l=i.filter((function(e){var t=e.type,n=e.independentColor;return"bar"===t&&n}));l.forEach((function(e){e.independentColors||(e.independentColors=r)}))}}));C(An);An.mergeColor;var Cn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.doUpdate=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.chart,n=e.series,r=e.key,i=e.getGraphConfig,a=e.getStartGraphConfig,s=e.beforeChange,l=e.beforeUpdate,d=e.afterAddGraph;t[r]?t[r].update(n):t[r]=new o({chart:t,key:r,getGraphConfig:i,getStartGraphConfig:a,beforeChange:s,beforeUpdate:l,afterAddGraph:d},n)},t.Updater=void 0;var n=y(P),r=y(_),i=y(jt),o=function e(t,n){(0,i.default)(this,e);var r=t.chart,o=t.key;"function"==typeof t.getGraphConfig?(r[o]||(this.graphs=r[o]=[]),Object.assign(this,t),this.update(n)):console.warn("Updater need function getGraphConfig!")};function a(e,t){Object.keys(t).forEach((function(n){"shape"===n||"style"===n?e.animation(n,t[n],!0):e[n]=t[n]}))}t.Updater=o,o.prototype.update=function(e){var t=this,i=this.graphs,o=this.beforeUpdate;if(function(e,t){var n=e.graphs,r=e.chart.render,i=n.length,o=t.length;if(i>o){n.splice(o).forEach((function(e){return e.forEach((function(e){return r.delGraph(e)}))}))}}(this,e),e.length){var s=(0,r.default)(o);e.forEach((function(e,r){"function"===s&&o(i,e,r,t);var l=i[r];l?function(e,t,r,i){var o=i.getGraphConfig,s=i.chart.render,l=i.beforeChange,d=o(t,i);(function(e,t,r){var i=e.length,o=t.length;if(o>i){var a=e.slice(-1)[0],s=new Array(o-i).fill(0).map((function(e){return r.clone(a)}));e.push.apply(e,(0,n.default)(s))}else if(o<i){e.splice(o).forEach((function(e){return r.delGraph(e)}))}})(e,d,s),e.forEach((function(e,t){var n=d[t];"function"==typeof l&&l(e,n),a(e,n)}))}(l,e,0,t):function(e,t,n,r){var i=r.getGraphConfig,o=r.getStartGraphConfig,s=r.chart.render,l=null;"function"==typeof o&&(l=o(t,r));var d=i(t,r);if(!d.length)return;l?(e[n]=l.map((function(e){return s.add(e)})),e[n].forEach((function(e,t){a(e,d[t])}))):e[n]=d.map((function(e){return s.add(e)}));var c=r.afterAddGraph;"function"==typeof c&&c(e[n])}(i,e,r,t)}))}}}));C(Cn);Cn.doUpdate,Cn.Updater;var bn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.title=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=[];t.title&&(n[0]=(0,F.deepMerge)((0,L.deepClone)(mn.titleConfig,!0),t.title));(0,Cn.doUpdate)({chart:e,series:n,key:"title",getGraphConfig:r})};var n=y(W);function r(e,t){var r=mn.titleConfig.animationCurve,i=mn.titleConfig.animationFrame,o=mn.titleConfig.rLevel,a=function(e,t){var r=e.offset,i=e.text,o=t.chart.gridArea,a=o.x,s=o.y,l=o.w,d=(0,n.default)(r,2),c=d[0],u=d[1];return{content:i,position:[a+l/2+c,s+u]}}(e,t),s=function(e){return e.style}(e);return[{name:"text",index:o,visible:e.show,animationCurve:r,animationFrame:i,shape:a,style:s}]}}));C(bn);bn.title;var yn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.grid=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.grid;n=(0,F.deepMerge)((0,L.deepClone)(mn.gridConfig,!0),n||{}),(0,Cn.doUpdate)({chart:e,series:[n],key:"grid",getGraphConfig:o})};var n=y(W),r=y(Mt);function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e,t){var o=e.animationCurve,s=e.animationFrame,l=e.rLevel,d=function(e,t){var r=(0,n.default)(t.chart.render.area,2),i=r[0],o=r[1],s=a(e.left,i),l=a(e.right,i),d=a(e.top,o),c=a(e.bottom,o);return{x:s,y:d,w:i-s-l,h:o-d-c}}(e,t),c=function(e){return e.style}(e);return t.chart.gridArea=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(n,!0).forEach((function(t){(0,r.default)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(n).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},d),[{name:"rect",index:l,animationCurve:o,animationFrame:s,shape:d,style:c}]}function a(e,t){return"number"==typeof e?e:"string"!=typeof e?0:t*parseInt(e)/100}}));C(yn);yn.grid;var xn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.axis=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.xAxis,r=t.yAxis,i=t.series,o=[];n&&r&&i&&(o=w(o=x(o=b(o=C(o=A(o=p(o=f(o=(o=h(o=u(n,r))).filter((function(e){return e.show}))),i)),e))),e));(0,Cn.doUpdate)({chart:e,series:o,key:"axisLine",getGraphConfig:k}),(0,Cn.doUpdate)({chart:e,series:o,key:"axisTick",getGraphConfig:S}),(0,Cn.doUpdate)({chart:e,series:o,key:"axisLabel",getGraphConfig:O}),(0,Cn.doUpdate)({chart:e,series:o,key:"axisName",getGraphConfig:j}),(0,Cn.doUpdate)({chart:e,series:o,key:"splitLine",getGraphConfig:R}),e.axisData=o};var n=y(_),r=y(W),i=y(Mt),o=y(P);function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(n,!0).forEach((function(t){(0,i.default)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(n).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var l={xAxisConfig:mn.xAxisConfig,yAxisConfig:mn.yAxisConfig},d=Math.abs,c=Math.pow;function u(e,t){var n,r,i=[],a=[];e instanceof Array?(n=i).push.apply(n,(0,o.default)(e)):i.push(e);t instanceof Array?(r=a).push.apply(r,(0,o.default)(t)):a.push(t);return i.splice(2),a.splice(2),i=i.map((function(e,t){return s({},e,{index:t,axis:"x"})})),a=a.map((function(e,t){return s({},e,{index:t,axis:"y"})})),[].concat((0,o.default)(i),(0,o.default)(a))}function h(e){var t=e.filter((function(e){return"x"===e.axis})),n=e.filter((function(e){return"y"===e.axis}));return t=t.map((function(e){return(0,F.deepMerge)((0,L.deepClone)(mn.xAxisConfig),e)})),n=n.map((function(e){return(0,F.deepMerge)((0,L.deepClone)(mn.yAxisConfig),e)})),[].concat((0,o.default)(t),(0,o.default)(n))}function f(e){var t=e.filter((function(e){return"value"===e.data})),n=e.filter((function(e){return"value"!==e.data}));return t.forEach((function(e){"boolean"!=typeof e.boundaryGap&&(e.boundaryGap=!1)})),n.forEach((function(e){"boolean"!=typeof e.boundaryGap&&(e.boundaryGap=!0)})),[].concat((0,o.default)(t),(0,o.default)(n))}function p(e,t){var i=e.filter((function(e){return"value"===e.data})),a=e.filter((function(e){return e.data instanceof Array}));return i=function(e,t){return e.map((function(e){var i=function(e,t){var i=e.min,o=e.max,a=e.axis,s=(0,r.default)(t,2),c=s[0],u=s[1],h=(0,n.default)(i),f=(0,n.default)(o);v(i)||(i=l[a+"AxisConfig"].min,h="string");v(o)||(o=l[a+"AxisConfig"].max,f="string");if("string"===h){var p=g(i=parseInt(c-d(c*parseFloat(i)/100)));i=parseFloat((i/p-.1).toFixed(1))*p}if("string"===f){var m=g(o=parseInt(u+d(u*parseFloat(o)/100)));o=parseFloat((o/m+.1).toFixed(1))*m}return[i,o]}(e,function(e,t){if(0===(t=t.filter((function(e){var t=e.show,n=e.type;return!1!==t&&"pie"!==n}))).length)return[0,0];var n=e.index,r=e.axis;t=function(e){var t=(0,L.deepClone)(e,!0);return e.forEach((function(n,r){var i=(0,F.mergeSameStackData)(n,e);t[r].data=i})),t}(t);var i=r+"Axis",a=t.filter((function(e){return e[i]===n}));a.length||(a=t);return function(e){if(!e)return;var t=Math.min.apply(Math,(0,o.default)(e.map((function(e){var t=e.data;return Math.min.apply(Math,(0,o.default)((0,F.filterNonNumber)(t)))})))),n=Math.max.apply(Math,(0,o.default)(e.map((function(e){var t=e.data;return Math.max.apply(Math,(0,o.default)((0,F.filterNonNumber)(t)))}))));return[t,n]}(a)}(e,t)),a=(0,r.default)(i,2),c=a[0],u=a[1],h=function(e,t,n){var r=n.interval,i=n.minInterval,o=n.maxInterval,a=n.splitNumber,s=n.axis,d=l[s+"AxisConfig"];"number"!=typeof r&&(r=d.interval);"number"!=typeof i&&(i=d.minInterval);"number"!=typeof o&&(o=d.maxInterval);"number"!=typeof a&&(a=d.splitNumber);if("number"==typeof r)return r;var c=parseInt((t-e)/(a-1));c.toString().length>1&&(c=parseInt(c.toString().replace(/\d$/,"0")));0===c&&(c=1);return"number"==typeof i&&c<i?i:"number"==typeof o&&c>o?o:c}(c,u,e),f=e.axisLabel.formatter,p=[];return s({},e,{maxValue:(p=(p=c<0&&u>0?function(e,t,n){var r=[],i=[],a=0,s=0;do{r.push(a-=n)}while(a>e);do{i.push(s+=n)}while(s<t);return[].concat((0,o.default)(r.reverse()),[0],(0,o.default)(i))}(c,u,h):function(e,t,n){var r=[e],i=e;do{r.push(i+=n)}while(i<t);return r}(c,u,h)).map((function(e){return parseFloat(e.toFixed(2))}))).slice(-1)[0],minValue:p[0],label:m(p,f)})}))}(i,t),a=function(e){return e.map((function(e){return s({},e,{label:m(e.data,e.axisLabel.formatter)})}))}(a),[].concat((0,o.default)(i),(0,o.default)(a))}function g(e){var t=d(e).toString(),n=t.length,r=t.replace(/0*$/g,"").indexOf("0"),i=n-1;return-1!==r&&(i-=r),c(10,i)}function v(e){var t=(0,n.default)(e);return"string"===t&&/^\d+%$/.test(e)||"number"===t}function m(e,t){return t?("string"==typeof t&&(e=e.map((function(e){return t.replace("{value}",e)}))),"function"==typeof t&&(e=e.map((function(e,n){return t({value:e,index:n})}))),e):e}function A(e){var t=e.filter((function(e){return"x"===e.axis})),n=e.filter((function(e){return"y"===e.axis}));return t[0]&&!t[0].position&&(t[0].position=mn.xAxisConfig.position),t[1]&&!t[1].position&&(t[1].position="bottom"===t[0].position?"top":"bottom"),n[0]&&!n[0].position&&(n[0].position=mn.yAxisConfig.position),n[1]&&!n[1].position&&(n[1].position="left"===n[0].position?"right":"left"),[].concat((0,o.default)(t),(0,o.default)(n))}function C(e,t){var n=t.gridArea,r=n.x,i=n.y,o=n.w,a=n.h;return e=e.map((function(e){var t=e.position,n=[];return"left"===t?n=[[r,i],[r,i+a]].reverse():"right"===t?n=[[r+o,i],[r+o,i+a]].reverse():"top"===t?n=[[r,i],[r+o,i]]:"bottom"===t&&(n=[[r,i+a],[r+o,i+a]]),s({},e,{linePosition:n})}))}function b(e,t){return e.map((function(e){var t=e.axis,n=e.linePosition,i=e.position,o=e.label,a=e.boundaryGap;"boolean"!=typeof a&&(a=l[t+"AxisConfig"].boundaryGap);var d=o.length,c=(0,r.default)(n,2),u=(0,r.default)(c[0],2),h=u[0],f=u[1],p=(0,r.default)(c[1],2),g=p[0],v=p[1],m=("x"===t?g-h:v-f)/(a?d:d-1),A=new Array(d).fill(0).map((function(e,n){return"x"===t?[h+m*(a?n+.5:n),f]:[h,f+m*(a?n+.5:n)]})),C=function(e,t,n,i,o){var a="x"===e?1:0,s=5;"x"===e&&"top"===n&&(s=-5);"y"===e&&"left"===n&&(s=-5);var l=i.map((function(e){var t=(0,L.deepClone)(e);return t[a]+=s,[(0,L.deepClone)(e),t]}));return t?(a="x"===e?0:1,s=o/2,l.forEach((function(e){var t=(0,r.default)(e,2),n=t[0],i=t[1];n[a]+=s,i[a]+=s})),l):l}(t,a,i,A,m);return s({},e,{tickPosition:A,tickLinePosition:C,tickGap:m})}))}function x(e,t){return e.map((function(e){var t=e.nameGap,n=e.nameLocation,i=e.position,a=e.linePosition,l=(0,r.default)(a,2),d=l[0],c=l[1],u=(0,o.default)(d);"end"===n&&(u=(0,o.default)(c)),"center"===n&&(u[0]=(d[0]+c[0])/2,u[1]=(d[1]+c[1])/2);var h=0;"top"===i&&"center"===n&&(h=1),"bottom"===i&&"center"===n&&(h=1),"left"===i&&"center"!==n&&(h=1),"right"===i&&"center"!==n&&(h=1);var f=t;return"top"===i&&"end"!==n&&(f*=-1),"left"===i&&"start"!==n&&(f*=-1),"bottom"===i&&"start"===n&&(f*=-1),"right"===i&&"end"===n&&(f*=-1),u[h]+=f,s({},e,{namePosition:u})}))}function w(e,t){var n=t.gridArea,i=n.w,a=n.h;return e.map((function(e){var t=e.tickLinePosition,n=e.position,l=e.boundaryGap,d=0,c=i;"top"!==n&&"bottom"!==n||(d=1),"top"!==n&&"bottom"!==n||(c=a),"right"!==n&&"bottom"!==n||(c*=-1);var u=t.map((function(e){var t=(0,r.default)(e,1)[0],n=(0,o.default)(t);return n[d]+=c,[(0,o.default)(t),n]}));return l||u.shift(),s({},e,{splitLinePosition:u})}))}function k(e){var t=e.animationCurve,n=e.animationFrame;return[{name:"polyline",index:e.rLevel,visible:e.axisLine.show,animationCurve:t,animationFrame:n,shape:E(e),style:B(e)}]}function E(e){return{points:e.linePosition}}function B(e){return e.axisLine.style}function S(e){var t=e.animationCurve,n=e.animationFrame,r=e.rLevel,i=function(e){return e.tickLinePosition.map((function(e){return{points:e}}))}(e),o=function(e){return e.axisTick.style}(e);return i.map((function(i){return{name:"polyline",index:r,visible:e.axisTick.show,animationCurve:t,animationFrame:n,shape:i,style:o}}))}function O(e){var t=e.animationCurve,n=e.animationFrame,r=e.rLevel,i=function(e){var t=e.label,n=e.tickPosition,r=e.position;return n.map((function(e,n){return{position:I(e,r),content:t[n].toString()}}))}(e),o=function(e,t){var n=e.position,r=e.axisLabel.style,i=function(e){if("left"===e)return{textAlign:"right",textBaseline:"middle"};if("right"===e)return{textAlign:"left",textBaseline:"middle"};if("top"===e)return{textAlign:"center",textBaseline:"bottom"};if("bottom"===e)return{textAlign:"center",textBaseline:"top"}}(n);return r=(0,F.deepMerge)(i,r),t.map((function(e){var t=e.position;return s({},r,{graphCenter:t})}))}(e,i);return i.map((function(i,a){return{name:"text",index:r,visible:e.axisLabel.show,animationCurve:t,animationFrame:n,shape:i,style:o[a],setGraphCenter:function(){}}}))}function I(e,t){var n=0,r=10;return"top"!==t&&"bottom"!==t||(n=1),"top"!==t&&"left"!==t||(r=-10),(e=(0,L.deepClone)(e))[n]+=r,e}function j(e){var t=e.animationCurve,n=e.animationFrame;return[{name:"text",index:e.rLevel,animationCurve:t,animationFrame:n,shape:M(e),style:D(e)}]}function M(e){return{content:e.name,position:e.namePosition}}function D(e){var t=e.nameLocation,n=e.position,r=e.nameTextStyle,i=function(e,t){if("top"===e&&"start"===t||"bottom"===e&&"start"===t||"left"===e&&"center"===t)return{textAlign:"right",textBaseline:"middle"};if("top"===e&&"end"===t||"bottom"===e&&"end"===t||"right"===e&&"center"===t)return{textAlign:"left",textBaseline:"middle"};if("top"===e&&"center"===t||"left"===e&&"end"===t||"right"===e&&"end"===t)return{textAlign:"center",textBaseline:"bottom"};if("bottom"===e&&"center"===t||"left"===e&&"start"===t||"right"===e&&"start"===t)return{textAlign:"center",textBaseline:"top"}}(n,t);return(0,F.deepMerge)(i,r)}function R(e){var t=e.animationCurve,n=e.animationFrame,r=e.rLevel,i=function(e){return e.splitLinePosition.map((function(e){return{points:e}}))}(e),o=function(e){return e.splitLine.style}(e);return i.map((function(i){return{name:"polyline",index:r,visible:e.splitLine.show,animationCurve:t,animationFrame:n,shape:i,style:o}}))}}));C(xn);xn.axis;var wn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.line=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.xAxis,r=t.yAxis,i=t.series,o=[];n&&r&&i&&(o=u(o=(0,F.initNeedSeries)(i,mn.lineConfig,"line"),e));(0,Cn.doUpdate)({chart:e,series:o,key:"lineArea",getGraphConfig:h,getStartGraphConfig:v,beforeUpdate:m,beforeChange:A}),(0,Cn.doUpdate)({chart:e,series:o,key:"line",getGraphConfig:C,getStartGraphConfig:w,beforeUpdate:m,beforeChange:A}),(0,Cn.doUpdate)({chart:e,series:o,key:"linePoint",getGraphConfig:k,getStartGraphConfig:E}),(0,Cn.doUpdate)({chart:e,series:o,key:"lineLabel",getGraphConfig:B})};var n=y(_),r=y(W),i=y(P),o=y(Mt),a=y(Rt);function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(n,!0).forEach((function(t){(0,o.default)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(n).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var d=a.default.polylineToBezierCurve,c=a.default.getBezierCurveLength;function u(e,t){var n=t.axisData;return e.map((function(t){var r=(0,F.mergeSameStackData)(t,e);r=function(e,t){var n=e.data;return t.map((function(e,t){return"number"==typeof n[t]?e:null}))}(t,r);var i=function(e,t){var n=e.xAxisIndex,r=e.yAxisIndex,i=t.find((function(e){var t=e.axis,r=e.index;return"x"===t&&r===n})),o=t.find((function(e){var t=e.axis,n=e.index;return"y"===t&&n===r}));return[i,o]}(t,n),o=function(e,t){var n=t.findIndex((function(e){return"value"===e.data})),r=t[n],i=t[1-n],o=r.linePosition,a=r.axis,s=i.tickPosition,l=s.length,d="x"===a?0:1,c=o[0][d],u=o[1][d]-c,h=r.maxValue,f=r.minValue,p=h-f;return new Array(l).fill(0).map((function(t,n){var r=e[n];if("number"!=typeof r)return null;var i=(r-f)/p;return 0===p&&(i=0),i*u+c})).map((function(e,t){if(t>=l||"number"!=typeof e)return null;var n=[e,s[t][1-d]];return 0===d||n.reverse(),n}))}(r,i),a=function(e){var t=e.find((function(e){return"value"===e.data})),n=t.axis,r=t.linePosition,i=t.minValue,o=t.maxValue,a="x"===n?0:1,s=r[0][a];if(i<0&&o>0){var l=o-i,d=Math.abs(r[0][a]-r[1][a]),c=Math.abs(i)/l*d;"y"===n&&(c*=-1),s+=c}return{changeIndex:a,changeValue:s}}(i);return l({},t,{linePosition:o.filter((function(e){return e})),lineFillBottomPos:a})}))}function h(e){var t=e.animationCurve,n=e.animationFrame,r=e.lineFillBottomPos,i=e.rLevel;return[{name:b(e),index:i,animationCurve:t,animationFrame:n,visible:e.lineArea.show,lineFillBottomPos:r,shape:f(e),style:p(e),drawed:g}]}function f(e){return{points:e.linePosition}}function p(e){var t=e.lineArea,n=e.color,r=t.gradient,o=t.style,a=[o.fill||n],s=(0,F.deepMerge)(a,r);1===s.length&&s.push(s[0]);var d=function(e){var t=e.lineFillBottomPos,n=e.linePosition,r=t.changeIndex,o=t.changeValue,a=n.map((function(e){return e[r]})),s=Math.max.apply(Math,(0,i.default)(a)),l=Math.min.apply(Math,(0,i.default)(a)),d=s;1===r&&(d=l);return 1===r?[0,d,0,o]:[d,0,o,0]}(e);return o=l({},o,{stroke:"rgba(0, 0, 0, 0)"}),(0,F.deepMerge)({gradientColor:s,gradientParams:d,gradientType:"linear",gradientWith:"fill"},o)}function g(e,t){var n=e.lineFillBottomPos,r=e.shape,o=t.ctx,a=r.points,s=n.changeIndex,l=n.changeValue,d=(0,i.default)(a[a.length-1]),c=(0,i.default)(a[0]);d[s]=l,c[s]=l,o.lineTo.apply(o,(0,i.default)(d)),o.lineTo.apply(o,(0,i.default)(c)),o.closePath(),o.fill()}function v(e){var t=h(e)[0],n=l({},t.style);return n.opacity=0,t.style=n,[t]}function m(e,t,n,r){var i=e[n];if(i){var o=b(t),a=r.chart.render;o!==i[0].name&&(i.forEach((function(e){return a.delGraph(e)})),e[n]=null)}}function A(e,t){var n=t.shape.points,r=e.shape.points,o=r.length,a=n.length;if(a>o){var s=r.slice(-1)[0],l=new Array(a-o).fill(0).map((function(e){return(0,i.default)(s)}));r.push.apply(r,(0,i.default)(l))}else a<o&&r.splice(a)}function C(e){var t=e.animationCurve,n=e.animationFrame,r=e.rLevel;return[{name:b(e),index:r+1,animationCurve:t,animationFrame:n,shape:f(e),style:x(e)}]}function b(e){return e.smooth?"smoothline":"polyline"}function x(e){var t=e.lineStyle,n=e.color,r=e.smooth,i=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!t)return(0,F.getPolylineLength)(e);var n=d(e);return c(n)}(e.linePosition,r);return(0,F.deepMerge)({stroke:n,lineDash:[i,0]},t)}function w(e){var t=e.lineStyle.lineDash,n=C(e)[0],r=n.style.lineDash;return r=t?[0,0]:(0,i.default)(r).reverse(),n.style.lineDash=r,[n]}function k(e){var t=e.animationCurve,n=e.animationFrame,i=e.rLevel,o=function(e){var t=e.linePosition,n=e.linePoint.radius;return t.map((function(e){var t=(0,r.default)(e,2),i=t[0],o=t[1];return{r:n,rx:i,ry:o}}))}(e),a=function(e){var t=e.color,n=e.linePoint.style;return(0,F.deepMerge)({stroke:t},n)}(e);return o.map((function(r){return{name:"circle",index:i+2,visible:e.linePoint.show,animationCurve:t,animationFrame:n,shape:r,style:a}}))}function E(e){var t=k(e);return t.forEach((function(e){e.shape.r=.1})),t}function B(e){var t=e.animationCurve,o=e.animationFrame,a=e.rLevel,s=function(e){var t=function(e){var t=e.data,r=e.label.formatter;if(t=t.filter((function(e){return"number"==typeof e})).map((function(e){return e.toString()})),!r)return t;var i=(0,n.default)(r);return"string"===i?t.map((function(e){return r.replace("{value}",e)})):"function"===i?t.map((function(e,t){return r({value:e,index:t})})):t}(e),o=function(e){var t=e.linePosition,n=e.lineFillBottomPos,o=e.label,a=o.position,s=o.offset,l=n.changeIndex,d=n.changeValue;return t.map((function(e){if("bottom"===a&&((e=(0,i.default)(e))[l]=d),"center"===a){var t=(0,i.default)(e);t[l]=d,n=e,o=t,c=(0,r.default)(n,2),u=c[0],h=c[1],f=(0,r.default)(o,2),p=f[0],g=f[1],e=[(u+p)/2,(h+g)/2]}var n,o,c,u,h,f,p,g,v,m,A,C,b,y,x,w;return v=e,m=s,A=(0,r.default)(v,2),C=A[0],b=A[1],y=(0,r.default)(m,2),x=y[0],w=y[1],[C+x,b+w]}))}(e);return t.map((function(e,t){return{content:e,position:o[t]}}))}(e),l=function(e){var t=e.color,n=e.label.style;return(0,F.deepMerge)({fill:t},n)}(e);return s.map((function(n,r){return{name:"text",index:a+3,visible:e.label.show,animationCurve:t,animationFrame:o,shape:n,style:l}}))}}));C(wn);wn.line;var kn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.bar=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.xAxis,r=t.yAxis,i=t.series,o=[];n&&r&&i&&(o=c(o=d(o=l(o=(0,F.initNeedSeries)(i,mn.barConfig,"bar"),e))));(0,Cn.doUpdate)({chart:e,series:o.slice(-1),key:"backgroundBar",getGraphConfig:h}),o.reverse(),(0,Cn.doUpdate)({chart:e,series:o,key:"bar",getGraphConfig:f,getStartGraphConfig:m,beforeUpdate:A}),(0,Cn.doUpdate)({chart:e,series:o,key:"barLabel",getGraphConfig:C})};var n=y(_),r=y(Mt),i=y(W),o=y(P);function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(n,!0).forEach((function(t){(0,r.default)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(n).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){var n=t.axisData;return e.forEach((function(e){var t=e.xAxisIndex,r=e.yAxisIndex;"number"!=typeof t&&(t=0),"number"!=typeof r&&(r=0);var i=[n.find((function(e){var n=e.axis,r=e.index;return"".concat(n).concat(r)==="x".concat(t)})),n.find((function(e){var t=e.axis,n=e.index;return"".concat(t).concat(n)==="y".concat(r)}))],o=i.findIndex((function(e){return"value"===e.data}));e.valueAxis=i[o],e.labelAxis=i[1-o]})),e}function d(e,t){return function(e){var t=e.map((function(e){var t=e.labelAxis;return t.axis+t.index}));return(t=(0,o.default)(new Set(t))).map((function(t){return e.filter((function(e){var n=e.labelAxis;return n.axis+n.index===t}))}))}(e).forEach((function(e){!function(e){var t=function(e){var t=[];return e.forEach((function(e){var n=e.stack;n&&t.push(n)})),(0,o.default)(new Set(t))}(e);t=t.map((function(e){return{stack:e,index:-1}}));var n=0;e.forEach((function(e){var r=e.stack;if(r){var i=t.find((function(e){return e.stack===r}));-1===i.index&&(i.index=n,n++),e.barIndex=i.index}else e.barIndex=n,n++}))}(e),function(e){var t=(0,o.default)(new Set(e.map((function(e){return e.barIndex})))).length;e.forEach((function(e){return e.barNum=t}))}(e),function(e){var t=e.slice(-1)[0],n=t.barCategoryGap,r=t.labelAxis.tickGap,i=0;i="number"==typeof n?n:(1-parseInt(n)/100)*r;e.forEach((function(e){return e.barCategoryWidth=i}))}(e),function(e){var t=e.slice(-1)[0],n=t.barCategoryWidth,r=t.barWidth,o=t.barGap,a=t.barNum,s=[];"number"==typeof r||"auto"!==r?s=function(e,t,n){var r=0,i=0;r="number"==typeof t?t:parseInt(t)/100*e;i="number"==typeof n?n:parseInt(n)/100*r;return[r,i]}(n,r,o):"auto"===r&&(s=function(e,t,n,r){var i=0,o=0,a=e/r;if("number"==typeof n)i=a-(o=n);else{var s=10+parseInt(n)/10;o=0===s?-(i=2*a):a-(i=a/s*10)}return[i,o]}(n,0,o,a));var l=s,d=(0,i.default)(l,2),c=d[0],u=d[1];e.forEach((function(e){e.barWidth=c,e.barGap=u}))}(e),function(e){var t=e.slice(-1)[0],n=t.barGap,r=t.barWidth,i=t.barNum,o=(n+r)*i-n;e.forEach((function(e){return e.barAllWidthAndGap=o}))}(e)})),e}function c(e,t){return e=function(e){return e.forEach((function(e){var t=e.data,n=e.barLabelAxisPos,r=e.barValueAxisPos,i=t.filter((function(e){return"number"==typeof e})).length;n.length>i&&(n.splice(i),r.splice(i))})),e}(e=function(e){return e.map((function(e){var t=e.barLabelAxisPos;return e.data.forEach((function(e,n){"number"!=typeof e&&(t[n]=null)})),s({},e,{barLabelAxisPos:t.filter((function(e){return null!==e}))})}))}(e=function(e){return e.map((function(e){var t=e.labelAxis,n=e.barAllWidthAndGap,r=e.barGap,i=e.barWidth,o=e.barIndex,a=t.tickGap,l=t.tickPosition,d="x"===t.axis?0:1;return s({},e,{barLabelAxisPos:l.map((function(e,t){return l[t][d]-a/2+(a-n)/2+(o+.5)*i+o*r}))})}))}(e=function(e){return e.map((function(t){var n=(0,F.mergeSameStackData)(t,e);n=function(e,t){var n=e.data;return t.map((function(e,t){return"number"==typeof n[t]?e:null})).filter((function(e){return null!==e}))}(t,n);var r=t.valueAxis,i=r.axis,o=r.minValue,a=r.maxValue,l=r.linePosition,d=u(o,a,o<0?0:o,l,i);return s({},t,{barValueAxisPos:n.map((function(e){return u(o,a,e,l,i)})).map((function(e){return[d,e]}))})}))}(e))))}function u(e,t,n,r,i){if("number"!=typeof n)return null;var o=t-e,a="x"===i?0:1,s=(n-e)/o;return 0===o&&(s=0),s*(r[1][a]-r[0][a])+r[0][a]}function h(e){var t=e.animationCurve,n=e.animationFrame,r=e.rLevel,i=function(e){var t=e.labelAxis,n=e.valueAxis,r=t.tickPosition,i=n.axis,o=n.linePosition,a=function(e){var t=e.barAllWidthAndGap,n=e.barCategoryWidth,r=e.backgroundBar.width;return"number"==typeof r?r:"auto"===r?t:parseInt(r)/100*n}(e),s=a/2,l="x"===i?0:1,d=r.map((function(e){return e[1-l]})),c=[o[0][l],o[1][l]],u=c[0],h=c[1];return d.map((function(e){return"x"===i?{x:u,y:e-s,w:h-u,h:a}:{x:e-s,y:h,w:a,h:u-h}}))}(e),o=function(e){return e.backgroundBar.style}(e);return i.map((function(i){return{name:"rect",index:r,visible:e.backgroundBar.show,animationCurve:t,animationFrame:n,shape:i,style:o}}))}function f(e){var t=e.barLabelAxisPos,n=e.animationCurve,r=e.animationFrame,i=e.rLevel,o=p(e);return t.map((function(t,a){return{name:o,index:i,animationCurve:n,animationFrame:r,shape:g(e,a),style:v(e,a)}}))}function p(e){var t=e.shapeType;return"leftEchelon"===t||"rightEchelon"===t?"polyline":"rect"}function g(e,t){var n=e.shapeType;return"leftEchelon"===n?function(e,t){var n=e.barValueAxisPos,r=e.barLabelAxisPos,o=e.barWidth,a=e.echelonOffset,s=(0,i.default)(n[t],2),l=s[0],d=s[1],c=r[t],u=o/2,h=e.valueAxis.axis,f=[];"x"===h?(f[0]=[d,c-u],f[1]=[d,c+u],f[2]=[l,c+u],f[3]=[l+a,c-u],d-l<a&&f.splice(3,1)):(f[0]=[c-u,d],f[1]=[c+u,d],f[2]=[c+u,l],f[3]=[c-u,l-a],l-d<a&&f.splice(3,1));return{points:f,close:!0}}(e,t):"rightEchelon"===n?function(e,t){var n=e.barValueAxisPos,r=e.barLabelAxisPos,o=e.barWidth,a=e.echelonOffset,s=(0,i.default)(n[t],2),l=s[0],d=s[1],c=r[t],u=o/2,h=e.valueAxis.axis,f=[];"x"===h?(f[0]=[d,c+u],f[1]=[d,c-u],f[2]=[l,c-u],f[3]=[l+a,c+u],d-l<a&&f.splice(2,1)):(f[0]=[c+u,d],f[1]=[c-u,d],f[2]=[c-u,l],f[3]=[c+u,l-a],l-d<a&&f.splice(2,1));return{points:f,close:!0}}(e,t):function(e,t){var n=e.barValueAxisPos,r=e.barLabelAxisPos,o=e.barWidth,a=(0,i.default)(n[t],2),s=a[0],l=a[1],d=r[t],c=e.valueAxis.axis,u={};"x"===c?(u.x=s,u.y=d-o/2,u.w=l-s,u.h=o):(u.x=d-o/2,u.y=l,u.w=o,u.h=s-l);return u}(e,t)}function v(e,t){var n=e.barStyle,r=e.gradient,o=e.color,a=e.independentColor,s=e.independentColors,l=[n.fill||o],d=(0,F.deepMerge)(l,r.color);if(a){var c=s[t%s.length];d=c instanceof Array?c:[c]}1===d.length&&d.push(d[0]);var u=function(e,t){var n=e.barValueAxisPos,r=e.barLabelAxisPos,o=e.data,a=e.valueAxis,s=a.linePosition,l=a.axis,d=(0,i.default)(n[t],2),c=d[0],u=d[1],h=r[t],f=o[t],p=(0,i.default)(s,2),g=p[0],v=p[1],m="x"===l?0:1,A=u;e.gradient.local||(A=f<0?g[m]:v[m]);return"y"===l?[h,A,h,c]:[A,h,c,h]}(e,t);return(0,F.deepMerge)({gradientColor:d,gradientParams:u,gradientType:"linear",gradientWith:"fill"},n)}function m(e){var t=f(e),n=e.shapeType;return t.forEach((function(t){var r=t.shape;r="leftEchelon"===n?function(e,t){var n=t.valueAxis.axis,r=(e=(0,L.deepClone)(e)).points,i="x"===n?0:1,o=r[2][i];return r.forEach((function(e){return e[i]=o})),e}(r,e):"rightEchelon"===n?function(e,t){var n=t.valueAxis.axis,r=(e=(0,L.deepClone)(e)).points,i="x"===n?0:1,o=r[2][i];return r.forEach((function(e){return e[i]=o})),e}(r,e):function(e,t){var n=t.valueAxis.axis,r=e.x,i=e.y,o=e.w,a=e.h;"x"===n?o=0:(i+=a,a=0);return{x:r,y:i,w:o,h:a}}(r,e),t.shape=r})),t}function A(e,t,n,r){var i=r.chart.render,o=p(t);e[n]&&e[n][0].name!==o&&(e[n].forEach((function(e){return i.delGraph(e)})),e[n]=null)}function C(e){var t=e.animationCurve,r=e.animationFrame,o=e.rLevel,a=function(e){var t=function(e){var t=e.data,r=e.label.formatter;if(t=t.filter((function(e){return"number"==typeof e})).map((function(e){return e.toString()})),!r)return t;var i=(0,n.default)(r);return"string"===i?t.map((function(e){return r.replace("{value}",e)})):"function"===i?t.map((function(e,t){return r({value:e,index:t})})):t}(e);return function(e){var t=e.label,n=e.barValueAxisPos,r=e.barLabelAxisPos,o=t.position,a=t.offset,s=e.valueAxis.axis;return n.map((function(e,t){var n,l,d,c,u,h,f,p,g=(0,i.default)(e,2),v=g[0],m=g[1],A=r[t],C=[m,A];return"bottom"===o&&(C=[v,A]),"center"===o&&(C=[(v+m)/2,A]),"y"===s&&C.reverse(),n=C,l=a,d=(0,i.default)(n,2),c=d[0],u=d[1],h=(0,i.default)(l,2),f=h[0],p=h[1],[c+f,u+p]}))}(e).map((function(e,n){return{position:e,content:t[n]}}))}(e),s=function(e){var t=e.color,n=e.label.style,r=e.gradient.color;r.length&&(t=r[0]);return n=(0,F.deepMerge)({fill:t},n)}(e);return a.map((function(n){return{name:"text",index:o,visible:e.label.show,animationCurve:t,animationFrame:r,shape:n,style:s}}))}}));C(kn);kn.bar;var En=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.pie=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.series;n||(n=[]);var r=(0,F.initNeedSeries)(n,hn.pieConfig,"pie");r=v(r=g(r=p(r=f(r=u(r=c(r=l(r=s(r,e),e))))))),(0,Cn.doUpdate)({chart:e,series:r,key:"pie",getGraphConfig:x,getStartGraphConfig:w,beforeChange:k}),(0,Cn.doUpdate)({chart:e,series:r,key:"pieInsideLabel",getGraphConfig:S}),(0,Cn.doUpdate)({chart:e,series:r,key:"pieOutsideLabelLine",getGraphConfig:j,getStartGraphConfig:M}),(0,Cn.doUpdate)({chart:e,series:r,key:"pieOutsideLabel",getGraphConfig:G,getStartGraphConfig:z})};var n=y(Mt),r=y(_),i=y(W),o=y(P);function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e,t){var n=t.render.area;return e.forEach((function(e){var t=e.center;t=t.map((function(e,t){return"number"==typeof e?e:parseInt(e)/100*n[t]})),e.center=t})),e}function l(e,t){var n=Math.min.apply(Math,(0,o.default)(t.render.area))/2;return e.forEach((function(e){var t=e.radius,r=e.data;t=d(t,n),r.forEach((function(e){var r=e.radius;r||(r=t),r=d(r,n),e.radius=r})),e.radius=t})),e}function d(e,t){return e instanceof Array||(e=[0,e]),e=e.map((function(e){return"number"==typeof e?e:parseInt(e)/100*t}))}function c(e,t){return e.filter((function(e){return e.roseType})).forEach((function(e){var t=e.radius,n=e.data,r=e.roseSort,i=function(e){var t=e.radius,n=e.roseIncrement;if("number"==typeof n)return n;if("auto"===n){var r=e.data,i=r.reduce((function(e,t){var n=t.radius;return[].concat((0,o.default)(e),(0,o.default)(n))}),[]),a=Math.min.apply(Math,(0,o.default)(i));return.6*(Math.max.apply(Math,(0,o.default)(i))-a)/(r.length-1||1)}return parseInt(n)/100*t[1]}(e),a=(0,o.default)(n);(n=function(e){return e.sort((function(e,t){var n=e.value,r=t.value;return n===r?0:n>r?-1:n<r?1:void 0}))}(n)).forEach((function(e,n){e.radius[1]=t[1]-i*n})),r?n.reverse():e.data=a,e.roseIncrement=i})),e}function u(e){return e.forEach((function(e){var t=e.data,n=e.percentToFixed,r=function(e){return(0,F.mulAdd)(e.map((function(e){return e.value})))}(t);t.forEach((function(e){var t=e.value;e.percent=t/r*100,e.percentForLabel=h(t/r*100,n)}));var i=(0,F.mulAdd)(t.slice(0,-1).map((function(e){return e.percent})));t.slice(-1)[0].percent=100-i,t.slice(-1)[0].percentForLabel=h(100-i,n)})),e}function h(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=e.toString(),r=n.split("."),i=r[1]||"0",o=i.slice(0,t);return r[1]=o,parseFloat(r.join("."))}function f(e){return e.forEach((function(e){var t=e.startAngle,n=e.data;n.forEach((function(e,r){var o=function(e,t){var n=2*Math.PI,r=e.slice(0,t+1),i=(0,F.mulAdd)(r.map((function(e){return e.percent}))),o=e[t].percent;return[n*(i-o)/100,n*i/100]}(n,r),a=(0,i.default)(o,2),s=a[0],l=a[1];e.startAngle=t+s,e.endAngle=t+l}))})),e}function p(e){return e.forEach((function(e){e.data.forEach((function(t){t.insideLabelPos=function(e,t){var n=e.center,r=t.startAngle,a=t.endAngle,s=(0,i.default)(t.radius,2),l=s[0],d=s[1],c=(l+d)/2,u=(r+a)/2;return L.getCircleRadianPoint.apply(void 0,(0,o.default)(n).concat([c,u]))}(e,t)}))})),e}function g(e){return e.forEach((function(e){var t=e.data,n=e.center;t.forEach((function(e){var t=e.startAngle,r=e.endAngle,i=e.radius,a=(t+r)/2,s=L.getCircleRadianPoint.apply(void 0,(0,o.default)(n).concat([i[1],a]));e.edgeCenterPos=s}))})),e}function v(e){return e.forEach((function(e){var t=A(e),n=A(e,!1);t=C(t),n=C(n),b(t,e),b(n,e,!1)})),e}function m(e){var t=e.outsideLabel.labelLineBendGap,n=function(e){var t=e.data.map((function(e){var t=(0,i.default)(e.radius,2);t[0];return t[1]}));return Math.max.apply(Math,(0,o.default)(t))}(e);return"number"!=typeof t&&(t=parseInt(t)/100*n),t+n}function A(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=e.data,r=e.center,i=r[0];return n.filter((function(e){var n=e.edgeCenterPos[0];return t?n<=i:n>i}))}function C(e){return e.sort((function(e,t){var n=(0,i.default)(e.edgeCenterPos,2),r=(n[0],n[1]),o=(0,i.default)(t.edgeCenterPos,2),a=(o[0],o[1]);return r>a?1:r<a?-1:r===a?0:void 0})),e}function b(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],r=t.center,i=t.outsideLabel,a=m(t);e.forEach((function(e){var t=e.edgeCenterPos,s=e.startAngle,l=e.endAngle,d=i.labelLineEndLength,c=(s+l)/2,u=L.getCircleRadianPoint.apply(void 0,(0,o.default)(r).concat([a,c])),h=(0,o.default)(u);h[0]+=d*(n?-1:1),e.labelLine=[t,u,h],e.labelLineLength=(0,F.getPolylineLength)(e.labelLine),e.align={textAlign:"left",textBaseline:"middle"},n&&(e.align.textAlign="right")}))}function x(e){var t=e.data,n=e.animationCurve,r=e.animationFrame,i=e.rLevel;return t.map((function(t,o){return{name:"pie",index:i,animationCurve:n,animationFrame:r,shape:E(e,o),style:B(e,o)}}))}function w(e){var t=e.animationDelayGap,n=e.startAnimationCurve,r=x(e);return r.forEach((function(e,r){e.animationCurve=n,e.animationDelay=r*t,e.shape.or=e.shape.ir})),r}function k(e){e.animationDelay=0}function E(e,t){var n=e.center,r=e.data[t],i=r.radius;return{startAngle:r.startAngle,endAngle:r.endAngle,ir:i[0],or:i[1],rx:n[0],ry:n[1]}}function B(e,t){var n=e.pieStyle,r=e.data[t].color;return(0,F.deepMerge)({fill:r},n)}function S(e){var t=e.animationCurve,n=e.animationFrame,r=e.data,i=e.rLevel;return r.map((function(r,o){return{name:"text",index:i,visible:e.insideLabel.show,animationCurve:t,animationFrame:n,shape:O(e,o),style:I(e)}}))}function O(e,t){var n=e.insideLabel,i=e.data,o=n.formatter,a=i[t],s=(0,r.default)(o),l="";return"string"===s&&(l=(l=(l=o.replace("{name}",a.name)).replace("{percent}",a.percentForLabel)).replace("{value}",a.value)),"function"===s&&(l=o(a)),{content:l,position:a.insideLabelPos}}function I(e,t){return e.insideLabel.style}function j(e){var t=e.animationCurve,n=e.animationFrame,r=e.data,i=e.rLevel;return r.map((function(r,o){return{name:"polyline",index:i,visible:e.outsideLabel.show,animationCurve:t,animationFrame:n,shape:D(e,o),style:R(e,o)}}))}function M(e){var t=e.data,n=j(e);return n.forEach((function(e,n){e.style.lineDash=[0,t[n].labelLineLength]})),n}function D(e,t){return{points:e.data[t].labelLine}}function R(e,t){var n=e.outsideLabel,r=e.data,i=n.labelLineStyle,o=r[t].color;return(0,F.deepMerge)({stroke:o,lineDash:[r[t].labelLineLength,0]},i)}function G(e){var t=e.animationCurve,n=e.animationFrame,r=e.data,i=e.rLevel;return r.map((function(r,o){return{name:"text",index:i,visible:e.outsideLabel.show,animationCurve:t,animationFrame:n,shape:T(e,o),style:Y(e,o)}}))}function z(e){var t=e.data,n=G(e);return n.forEach((function(e,n){e.shape.position=t[n].labelLine[1]})),n}function T(e,t){var n=e.outsideLabel,i=e.data,o=n.formatter,a=i[t],s=a.labelLine,l=a.name,d=a.percentForLabel,c=a.value,u=(0,r.default)(o),h="";return"string"===u&&(h=(h=(h=o.replace("{name}",l)).replace("{percent}",d)).replace("{value}",c)),"function"===u&&(h=o(i[t])),{content:h,position:s[2]}}function Y(e,t){var r=e.outsideLabel,i=e.data[t],o=i.color,s=i.align,l=r.style;return(0,F.deepMerge)(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(r,!0).forEach((function(t){(0,n.default)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(r).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({fill:o},s),l)}}));C(En);En.pie;var Bn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.radarAxis=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.radar,r=[];n&&(r=[r=h(r=u(r=c(r=d(r=l(r=s(n),e),e))))]);var i=r;r.length&&!r[0].show&&(i=[]);(0,Cn.doUpdate)({chart:e,series:i,key:"radarAxisSplitArea",getGraphConfig:f,beforeUpdate:v,beforeChange:m}),(0,Cn.doUpdate)({chart:e,series:i,key:"radarAxisSplitLine",getGraphConfig:A,beforeUpdate:x,beforeChange:w}),(0,Cn.doUpdate)({chart:e,series:i,key:"radarAxisLine",getGraphConfig:k}),(0,Cn.doUpdate)({chart:e,series:i,key:"radarAxisLable",getGraphConfig:_}),e.radarAxis=r[0]};var n=y(W),r=y(Mt),i=y(P);function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(n,!0).forEach((function(t){(0,r.default)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(n).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e){return(0,F.deepMerge)((0,L.deepClone)(mn.radarAxisConfig),e)}function l(e,t){var n=t.render.area,r=e.center;return e.centerPos=r.map((function(e,t){return"number"==typeof e?e:parseInt(e)/100*n[t]})),e}function d(e,t){var n=t.render.area,r=e.splitNum,o=e.radius,a=Math.min.apply(Math,(0,i.default)(n))/2;"number"!=typeof o&&(o=parseInt(o)/100*a);var s=o/r;return e.ringRadius=new Array(r).fill(0).map((function(e,t){return s*(t+1)})),e.radius=o,e}function c(e){var t=e.indicator,n=e.centerPos,r=e.radius,o=e.startAngle,a=2*Math.PI,s=t.length,l=a/s,d=new Array(s).fill(0).map((function(e,t){return l*t+o}));return e.axisLineAngles=d,e.axisLinePosition=d.map((function(e){return L.getCircleRadianPoint.apply(void 0,(0,i.default)(n).concat([r,e]))})),e}function u(e){var t=e.ringRadius,n=t[0]/2;return e.areaRadius=t.map((function(e){return e-n})),e}function h(e){var t=e.axisLineAngles,n=e.centerPos,r=e.radius,o=e.axisLabel;return r+=o.labelGap,e.axisLabelPosition=t.map((function(e){return L.getCircleRadianPoint.apply(void 0,(0,i.default)(n).concat([r,e]))})),e}function f(e){var t=e.areaRadius,n=e.polygon,r=e.animationCurve,i=e.animationFrame,o=e.rLevel,a=n?"regPolygon":"ring";return t.map((function(t,n){return{name:a,index:o,visible:e.splitArea.show,animationCurve:r,animationFrame:i,shape:p(e,n),style:g(e,n)}}))}function p(e,t){var n=e.polygon,r=e.areaRadius,i=e.indicator,o=e.centerPos,a=i.length,s={rx:o[0],ry:o[1],r:r[t]};return n&&(s.side=a),s}function g(e,t){var n=e.splitArea,r=e.ringRadius,o=e.axisLineAngles,s=e.polygon,l=e.centerPos,d=n.color,c=n.style;c=a({fill:"rgba(0, 0, 0, 0)"},c);var u=r[0]-0;if(s){var h=L.getCircleRadianPoint.apply(void 0,(0,i.default)(l).concat([r[0],o[0]])),f=L.getCircleRadianPoint.apply(void 0,(0,i.default)(l).concat([r[0],o[1]]));u=(0,F.getPointToLineDistance)(l,h,f)}if(c=(0,F.deepMerge)((0,L.deepClone)(c,!0),{lineWidth:u}),!d.length)return c;var p=d.length;return(0,F.deepMerge)(c,{stroke:d[t%p]})}function v(e,t,n,r){var i=e[n];if(i){var o=r.chart.render;(t.polygon?"regPolygon":"ring")!==i[0].name&&(i.forEach((function(e){return o.delGraph(e)})),e[n]=null)}}function m(e,t){var n=t.shape.side;"number"==typeof n&&(e.shape.side=n)}function A(e){var t=e.ringRadius,n=e.polygon,r=e.animationCurve,i=e.animationFrame,o=e.rLevel,a=n?"regPolygon":"ring";return t.map((function(t,n){return{name:a,index:o,animationCurve:r,animationFrame:i,visible:e.splitLine.show,shape:C(e,n),style:b(e,n)}}))}function C(e,t){var n=e.ringRadius,r=e.centerPos,i=e.indicator,o=e.polygon,a={rx:r[0],ry:r[1],r:n[t]},s=i.length;return o&&(a.side=s),a}function b(e,t){var n=e.splitLine,r=n.color,i=n.style;if(i=a({fill:"rgba(0, 0, 0, 0)"},i),!r.length)return i;var o=r.length;return(0,F.deepMerge)(i,{stroke:r[t%o]})}function x(e,t,n,r){var i=e[n];if(i){var o=r.chart.render;(t.polygon?"regPolygon":"ring")!==i[0].name&&(i.forEach((function(e){return o.delGraph(e)})),e[n]=null)}}function w(e,t){var n=t.shape.side;"number"==typeof n&&(e.shape.side=n)}function k(e){var t=e.axisLinePosition,n=e.animationCurve,r=e.animationFrame,i=e.rLevel;return t.map((function(t,o){return{name:"polyline",index:i,visible:e.axisLine.show,animationCurve:n,animationFrame:r,shape:E(e,o),style:B(e,o)}}))}function E(e,t){return{points:[e.centerPos,e.axisLinePosition[t]]}}function B(e,t){var n=e.axisLine,r=n.color,i=n.style;if(!r.length)return i;var o=r.length;return(0,F.deepMerge)(i,{stroke:r[t%o]})}function _(e){var t=e.axisLabelPosition,n=e.animationCurve,r=e.animationFrame,i=e.rLevel;return t.map((function(t,o){return{name:"text",index:i,visible:e.axisLabel.show,animationCurve:n,animationFrame:r,shape:S(e,o),style:O(e,o)}}))}function S(e,t){var n=e.axisLabelPosition;return{content:e.indicator[t].name,position:n[t]}}function O(e,t){var r=e.axisLabel,i=(0,n.default)(e.centerPos,2),o=i[0],a=i[1],s=e.axisLabelPosition,l=r.color,d=r.style,c=(0,n.default)(s[t],2),u=c[0]>o?"left":"right",h=c[1]>a?"top":"bottom";if(d=(0,F.deepMerge)({textAlign:u,textBaseline:h},d),!l.length)return d;var f=l.length;return(0,F.deepMerge)(d,{fill:l[t%f]})}}));C(Bn);Bn.radarAxis;var Pn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.radar=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.series;n||(n=[]);var r=(0,F.initNeedSeries)(n,mn.radarConfig,"radar");r=d(r=l(r=s(r,e),e),e),(0,Cn.doUpdate)({chart:e,series:r,key:"radar",getGraphConfig:c,getStartGraphConfig:u,beforeChange:p}),(0,Cn.doUpdate)({chart:e,series:r,key:"radarPoint",getGraphConfig:g,getStartGraphConfig:v}),(0,Cn.doUpdate)({chart:e,series:r,key:"radarLabel",getGraphConfig:C})};var n=y(Mt),r=y(_),i=y(W),o=y(P);function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e,t){var n=t.radarAxis;if(!n)return[];var r=n.indicator,i=n.axisLineAngles,a=n.radius,s=n.centerPos;return e.forEach((function(e){var t=e.data;e.dataRadius=[],e.radarPosition=r.map((function(n,r){var l=n.max,d=n.min,c=t[r];"number"!=typeof l&&(l=c),"number"!=typeof d&&(d=0),"number"!=typeof c&&(c=d);var u=(c-d)/(l-d)*a;return e.dataRadius[r]=u,L.getCircleRadianPoint.apply(void 0,(0,o.default)(s).concat([u,i[r]]))}))})),e}function l(e,t){var n=t.radarAxis;if(!n)return[];var r=n.centerPos,i=n.axisLineAngles;return e.forEach((function(e){var t=e.dataRadius,n=e.label.labelGap;e.labelPosition=t.map((function(e,t){return L.getCircleRadianPoint.apply(void 0,(0,o.default)(r).concat([e+n,i[t]]))}))})),e}function d(e,t){var n=t.radarAxis;if(!n)return[];var r=(0,i.default)(n.centerPos,2),o=r[0],a=r[1];return e.forEach((function(e){var t=e.labelPosition.map((function(e){var t=(0,i.default)(e,2),n=t[0],r=t[1];return{textAlign:n>o?"left":"right",textBaseline:r>a?"top":"bottom"}}));e.labelAlign=t})),e}function c(e){var t=e.animationCurve,n=e.animationFrame;return[{name:"polyline",index:e.rLevel,animationCurve:t,animationFrame:n,shape:h(e),style:f(e)}]}function u(e,t){var n=t.chart.radarAxis.centerPos,r=c(e)[0],i=r.shape.points.length,a=new Array(i).fill(0).map((function(e){return(0,o.default)(n)}));return r.shape.points=a,[r]}function h(e){return{points:e.radarPosition,close:!0}}function f(e){var t=e.radarStyle,n=e.color,r=(0,Be.getRgbaValue)(n);r[3]=.5;var i={stroke:n,fill:(0,Be.getColorFromRgbValue)(r)};return(0,F.deepMerge)(i,t)}function p(e,t){var n=t.shape,r=e.shape.points,i=r.length,a=n.points.length;if(a>i){var s=r.slice(-1)[0],l=new Array(a-i).fill(0).map((function(e){return(0,o.default)(s)}));r.push.apply(r,(0,o.default)(l))}else a<i&&r.splice(a)}function g(e){var t=e.radarPosition,n=e.animationCurve,r=e.animationFrame,i=e.rLevel;return t.map((function(t,o){return{name:"circle",index:i,animationCurve:n,animationFrame:r,visible:e.point.show,shape:m(e,o),style:A(e)}}))}function v(e){var t=g(e);return t.forEach((function(e){return e.shape.r=.01})),t}function m(e,t){var n=e.radarPosition,r=e.point.radius,i=n[t];return{rx:i[0],ry:i[1],r:r}}function A(e,t){var n=e.point,r=e.color,i=n.style;return(0,F.deepMerge)({stroke:r},i)}function C(e){var t=e.labelPosition,n=e.animationCurve,r=e.animationFrame,i=e.rLevel;return t.map((function(t,o){return{name:"text",index:i,visible:e.label.show,animationCurve:n,animationFrame:r,shape:b(e,o),style:x(e,o)}}))}function b(e,t){var n,o,a,s,l,d,c,u,h=e.labelPosition,f=e.label,p=e.data,g=f.offset,v=f.formatter,m=(n=h[t],o=g,a=(0,i.default)(n,2),s=a[0],l=a[1],d=(0,i.default)(o,2),c=d[0],u=d[1],[s+c,l+u]),A=p[t]?p[t].toString():"0",C=(0,r.default)(v);return"string"===C&&(A=v.replace("{value}",A)),"function"===C&&(A=v(A)),{content:A,position:m}}function x(e,t){var r=e.label,i=e.color,o=e.labelAlign,s=r.style,l=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(r,!0).forEach((function(t){(0,n.default)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(r).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({fill:i},o[t]);return(0,F.deepMerge)(l,s)}}));C(Pn);Pn.radar;var _n=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.gauge=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.series;n||(n=[]);var r=(0,F.initNeedSeries)(n,gn.gaugeConfig,"gauge");r=m(r=v(r=g(r=p(r=f(r=h(r=u(r=c(r=d(r=l(r,e),e),e)))))))),(0,Cn.doUpdate)({chart:e,series:r,key:"gaugeAxisTick",getGraphConfig:A}),(0,Cn.doUpdate)({chart:e,series:r,key:"gaugeAxisLabel",getGraphConfig:x}),(0,Cn.doUpdate)({chart:e,series:r,key:"gaugeBackgroundArc",getGraphConfig:E,getStartGraphConfig:O}),(0,Cn.doUpdate)({chart:e,series:r,key:"gaugeArc",getGraphConfig:I,getStartGraphConfig:D,beforeChange:R}),(0,Cn.doUpdate)({chart:e,series:r,key:"gaugePointer",getGraphConfig:G,getStartGraphConfig:Y}),(0,Cn.doUpdate)({chart:e,series:r,key:"gaugeDetails",getGraphConfig:N})};var n=y(Mt),r=y(_),i=y(W),o=y(P);function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(r,!0).forEach((function(t){(0,n.default)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(r).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){var n=t.render.area;return e.forEach((function(e){var t=e.center;t=t.map((function(e,t){return"number"==typeof e?e:parseInt(e)/100*n[t]})),e.center=t})),e}function d(e,t){var n=t.render.area,r=Math.min.apply(Math,(0,o.default)(n))/2;return e.forEach((function(e){var t=e.radius;"number"!=typeof t&&(t=parseInt(t)/100*r),e.radius=t})),e}function c(e,t){var n=t.render.area,r=Math.min.apply(Math,(0,o.default)(n))/2;return e.forEach((function(e){var t=e.radius,n=e.data,i=e.arcLineWidth;n.forEach((function(e){var n=e.radius,o=e.lineWidth;n||(n=t),"number"!=typeof n&&(n=parseInt(n)/100*r),e.radius=n,o||(o=i),e.lineWidth=o}))})),e}function u(e,t){return e.forEach((function(e){var t=e.startAngle,n=e.endAngle,r=e.data,i=e.min,o=e.max,a=n-t,s=o-i;r.forEach((function(e){var n=e.value,r=Math.abs((n-i)/s*a);e.startAngle=t,e.endAngle=t+r}))})),e}function h(e,t){return e.forEach((function(e){e.data.forEach((function(e){var t=e.color,n=e.gradient;n&&n.length||(n=t),n instanceof Array||(n=[n]),e.gradient=n}))})),e}function f(e,t){return e.forEach((function(e){var t=e.startAngle,n=e.endAngle,r=e.splitNum,i=e.center,a=e.radius,s=e.arcLineWidth,l=e.axisTick,d=l.tickLength,c=l.style.lineWidth,u=n-t,h=a-s/2,f=h-d,p=u/(r-1),g=2*Math.PI*a*u/(2*Math.PI),v=Math.ceil(c/2)/g*u;e.tickAngles=[],e.tickInnerRadius=[],e.tickPosition=new Array(r).fill(0).map((function(n,a){var s=t+p*a;return 0===a&&(s+=v),a===r-1&&(s-=v),e.tickAngles[a]=s,e.tickInnerRadius[a]=f,[L.getCircleRadianPoint.apply(void 0,(0,o.default)(i).concat([h,s])),L.getCircleRadianPoint.apply(void 0,(0,o.default)(i).concat([f,s]))]}))})),e}function p(e,t){return e.forEach((function(e){var t=e.center,n=e.tickInnerRadius,r=e.tickAngles,a=e.axisLabel.labelGap,s=r.map((function(e,i){return L.getCircleRadianPoint.apply(void 0,(0,o.default)(t).concat([n[i]-a,r[i]]))})),l=s.map((function(e){var n=(0,i.default)(e,2),r=n[0],o=n[1];return{textAlign:r>t[0]?"right":"left",textBaseline:o>t[1]?"bottom":"top"}}));e.labelPosition=s,e.labelAlign=l})),e}function g(e,t){return e.forEach((function(e){var t=e.axisLabel,n=e.min,i=e.max,o=e.splitNum,a=t.data,s=t.formatter,l=(i-n)/(o-1),d=new Array(o).fill(0).map((function(e,t){return parseInt(n+l*t)})),c=(0,r.default)(s);a=(0,F.deepMerge)(d,a).map((function(e,t){var n=e;return"string"===c&&(n=s.replace("{value}",e)),"function"===c&&(n=s({value:e,index:t})),n})),t.data=a})),e}function v(e,t){return e.forEach((function(e){var t=e.data,n=e.details,r=e.center,a=n.position,s=n.offset,l=t.map((function(e){var t,n,l,d,c,u,h,f,p=e.startAngle,g=e.endAngle,v=e.radius,m=null;return"center"===a?m=r:"start"===a?m=L.getCircleRadianPoint.apply(void 0,(0,o.default)(r).concat([v,p])):"end"===a&&(m=L.getCircleRadianPoint.apply(void 0,(0,o.default)(r).concat([v,g]))),t=m,n=s,l=(0,i.default)(t,2),d=l[0],c=l[1],u=(0,i.default)(n,2),h=u[0],f=u[1],[d+h,c+f]}));e.detailsPosition=l})),e}function m(e,t){return e.forEach((function(e){var t=e.data,n=e.details.formatter,i=(0,r.default)(n),o=t.map((function(e){var t=e.value;return"string"===i&&(t=(t=n.replace("{value}","{nt}")).replace("{name}",e.name)),"function"===i&&(t=n(e)),t.toString()}));e.detailsContent=o})),e}function A(e){var t=e.tickPosition,n=e.animationCurve,r=e.animationFrame,i=e.rLevel;return t.map((function(t,o){return{name:"polyline",index:i,visible:e.axisTick.show,animationCurve:n,animationFrame:r,shape:C(e,o),style:b(e)}}))}function C(e,t){return{points:e.tickPosition[t]}}function b(e,t){return e.axisTick.style}function x(e){var t=e.labelPosition,n=e.animationCurve,r=e.animationFrame,i=e.rLevel;return t.map((function(t,o){return{name:"text",index:i,visible:e.axisLabel.show,animationCurve:n,animationFrame:r,shape:w(e,o),style:k(e,o)}}))}function w(e,t){var n=e.labelPosition;return{content:e.axisLabel.data[t].toString(),position:n[t]}}function k(e,t){var n=e.labelAlign,r=e.axisLabel.style;return(0,F.deepMerge)(s({},n[t]),r)}function E(e){var t=e.animationCurve,n=e.animationFrame;return[{name:"arc",index:e.rLevel,visible:e.backgroundArc.show,animationCurve:t,animationFrame:n,shape:B(e),style:S(e)}]}function B(e){var t=e.startAngle,n=e.endAngle,r=e.center,i=e.radius;return{rx:r[0],ry:r[1],r:i,startAngle:t,endAngle:n}}function S(e){var t=e.backgroundArc,n=e.arcLineWidth,r=t.style;return(0,F.deepMerge)({lineWidth:n},r)}function O(e){var t=E(e)[0],n=s({},t.shape);return n.endAngle=t.shape.startAngle,t.shape=n,[t]}function I(e){var t=e.data,n=e.animationCurve,r=e.animationFrame,i=e.rLevel;return t.map((function(t,o){return{name:"agArc",index:i,animationCurve:n,animationFrame:r,shape:j(e,o),style:M(e,o)}}))}function j(e,t){var n=e.data,r=e.center,i=e.endAngle,o=n[t],a=o.radius,s=o.startAngle,l=o.endAngle;return o.localGradient&&(i=l),{rx:r[0],ry:r[1],r:a,startAngle:s,endAngle:l,gradientEndAngle:i}}function M(e,t){var n=e.data,r=e.dataItemStyle,i=n[t],o=i.lineWidth,a=i.gradient;return a=a.map((function(e){return(0,Be.getRgbaValue)(e)})),(0,F.deepMerge)({lineWidth:o,gradient:a},r)}function D(e){var t=I(e);return t.map((function(e){var t=s({},e.shape);t.endAngle=e.shape.startAngle,e.shape=t})),t}function R(e,t){var n=e.style.gradient,r=n.length,i=t.style.gradient.length;if(r>i)n.splice(i);else{var a=n.slice(-1)[0];n.push.apply(n,(0,o.default)(new Array(i-r).fill(0).map((function(e){return(0,o.default)(a)}))))}}function G(e){var t=e.animationCurve,n=e.animationFrame,r=e.center;return[{name:"polyline",index:e.rLevel,visible:e.pointer.show,animationCurve:t,animationFrame:n,shape:z(e),style:T(e),setGraphCenter:function(e,t){t.style.graphCenter=r}}]}function z(e){var t,n,r,o,a,s,l,d,c=e.center;return{points:(t=c,n=(0,i.default)(t,2),r=n[0],o=n[1],a=[r,o-40],s=[r+5,o],l=[r,o+10],d=[r-5,o],[a,s,l,d]),close:!0}}function T(e){var t=e.startAngle,n=e.endAngle,r=e.min,i=e.max,o=e.data,a=e.pointer,s=e.center,l=a.valueIndex,d=a.style,c=((o[l]?o[l].value:0)-r)/(i-r)*(n-t)+t+Math.PI/2;return(0,F.deepMerge)({rotate:(0,F.radianToAngle)(c),scale:[1,1],graphCenter:s},d)}function Y(e){var t=e.startAngle,n=G(e)[0];return n.style.rotate=(0,F.radianToAngle)(t+Math.PI/2),[n]}function N(e){var t=e.detailsPosition,n=e.animationCurve,r=e.animationFrame,i=e.rLevel,o=e.details.show;return t.map((function(t,a){return{name:"numberText",index:i,visible:o,animationCurve:n,animationFrame:r,shape:X(e,a),style:$(e,a)}}))}function X(e,t){var n=e.detailsPosition,r=e.detailsContent,i=e.data,o=e.details,a=n[t],s=r[t];return{number:[i[t].value],content:s,position:a,toFixed:o.valueToFixed}}function $(e,t){var n=e.details,r=e.data,i=n.style,o=r[t].color;return(0,F.deepMerge)({fill:o},i)}}));C(_n);_n.gauge;var Sn=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.legend=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.legend;n=n?[n=l(n=s(n=a(n=o(n=(0,F.deepMerge)((0,L.deepClone)(mn.legendConfig,!0),n)),t,e),e),e)]:[];(0,Cn.doUpdate)({chart:e,series:n,key:"legendIcon",getGraphConfig:u}),(0,Cn.doUpdate)({chart:e,series:n,key:"legendText",getGraphConfig:p})};var n=y(Mt),r=y(W),i=y(_);function o(e){var t=e.data;return e.data=t.map((function(e){var t=(0,i.default)(e);return"string"===t?{name:e}:"object"===t?e:{name:""}})),e}function a(e,t,n){var r=t.series,i=n.legendStatus,o=e.data.filter((function(e){var t=e.name,n=r.find((function(e){var n=e.name;return t===n}));return!!n&&(e.color||(e.color=n.color),e.icon||(e.icon=n.type),e)}));return i&&i.length===e.data.length||(i=new Array(e.data.length).fill(!0)),o.forEach((function(e,t){return e.status=i[t]})),e.data=o,n.legendStatus=i,e}function s(e,t){var n=t.render.ctx,r=e.data,i=e.textStyle,o=e.textUnselectedStyle;return r.forEach((function(e){var t=e.status,r=e.name;e.textWidth=function(e,t,n){return e.font=function(e){var t=e.fontFamily,n=e.fontSize;return"".concat(n,"px ").concat(t)}(n),e.measureText(t).width}(n,r,t?i:o)})),e}function l(e,t){return"vertical"===e.orient?function(e,t){var n=function(e,t){var n=e.left,r=e.right,i=t.render.area[0],o=[n,r].findIndex((function(e){return"auto"!==e}));if(-1===o)return[!0,i-10];var a=[n,r][o];return"number"!=typeof a&&(a=parseInt(a)/100*i),[Boolean(o),a]}(e,t),i=(0,r.default)(n,2),o=i[0],a=i[1],s=function(e,t){var n=e.iconHeight,r=e.itemGap,i=e.data,o=e.top,a=e.bottom,s=t.render.area[1],l=i.length,d=l*n+(l-1)*r,c=[o,a].findIndex((function(e){return"auto"!==e}));if(-1===c)return(s-d)/2;var u=[o,a][c];return"number"!=typeof u&&(u=parseInt(u)/100*s),1===c&&(u=s-u-d),u}(e,t);!function(e,t){var n=e.data,r=e.iconWidth,i=e.iconHeight,o=e.itemGap,a=i/2;n.forEach((function(e,n){var s=e.textWidth,l=(i+o)*n+a,d=t?0-r:0,c=t?d-5-s:r+5;e.iconPosition=[d,l],e.textPosition=[c,l]}))}(e,o);var l={textAlign:"left",textBaseline:"middle"};e.data.forEach((function(e){var t=e.textPosition,n=e.iconPosition;e.textPosition=c(t,[a,s]),e.iconPosition=c(n,[a,s]),e.align=l}))}(e,t):function(e,t){var n=e.iconHeight,r=e.itemGap,i=function(e,t){var n=e.data,r=e.iconWidth,i=t.render.area[0],o=0,a=[[]];return n.forEach((function(t,n){var s=d(o,n,e);s+r+5+t.textWidth>=i&&(s=d(o=n,n,e),a.push([])),t.iconPosition=[s,0],t.textPosition=[s+r+5,0],a.slice(-1)[0].push(t)})),a}(e,t),o=i.map((function(n){return function(e,t,n){var r=t.left,i=t.right,o=t.iconWidth,a=t.itemGap,s=n.render.area[0],l=e.length,d=(0,F.mulAdd)(e.map((function(e){return e.textWidth})))+l*(5+o)+(l-1)*a,c=[r,i].findIndex((function(e){return"auto"!==e}));return-1===c?(s-d)/2:0===c?"number"==typeof r?r:parseInt(r)/100*s:("number"!=typeof i&&(i=parseInt(i)/100*s),s-(d+i))}(n,e,t)})),a=function(e,t){var n=e.top,r=e.bottom,i=e.iconHeight,o=t.render.area[1],a=[n,r].findIndex((function(e){return"auto"!==e})),s=i/2;if(-1===a){var l=t.gridArea,d=l.y,c=l.h;return d+c+45-s}return 0===a?"number"==typeof n?n-s:parseInt(n)/100*o-s:("number"!=typeof r&&(r=parseInt(r)/100*o),o-r-s)}(e,t),s={textAlign:"left",textBaseline:"middle"};i.forEach((function(e,t){return e.forEach((function(e){var i=e.iconPosition,l=e.textPosition,d=o[t],u=a+t*(r+n);e.iconPosition=c(i,[d,u]),e.textPosition=c(l,[d,u]),e.align=s}))}))}(e,t),e}function d(e,t,n){var r=n.data,i=n.iconWidth,o=n.itemGap,a=r.slice(e,t);return(0,F.mulAdd)(a.map((function(e){return e.textWidth})))+(t-e)*(o+5+i)}function c(e,t){var n=(0,r.default)(e,2),i=n[0],o=n[1],a=(0,r.default)(t,2);return[i+a[0],o+a[1]]}function u(e,t){var r=e.data,i=e.selectAble,o=e.animationCurve,a=e.animationFrame,s=e.rLevel;return r.map((function(r,l){return(0,n.default)({name:"line"===r.icon?"lineIcon":"rect",index:s,visible:e.show,hover:i,click:i,animationCurve:o,animationFrame:a,shape:h(e,l),style:f(e,l)},"click",A(e,l,t))}))}function h(e,t){var n=e.data,i=e.iconWidth,o=e.iconHeight,a=(0,r.default)(n[t].iconPosition,2);return{x:a[0],y:a[1]-o/2,w:i,h:o}}function f(e,t){var n=e.data,r=e.iconStyle,i=e.iconUnselectedStyle,o=n[t],a=o.status,s=o.color,l=a?r:i;return(0,F.deepMerge)({fill:s},l)}function p(e,t){var n=e.data,r=e.selectAble,i=e.animationCurve,o=e.animationFrame,a=e.rLevel;return n.map((function(n,s){return{name:"text",index:a,visible:e.show,hover:r,animationCurve:i,animationFrame:o,hoverRect:m(e,s),shape:g(e,s),style:v(e,s),click:A(e,s,t)}}))}function g(e,t){var n=e.data[t],r=n.textPosition;return{content:n.name,position:r}}function v(e,t){var n=e.textStyle,r=e.textUnselectedStyle,i=e.data[t],o=i.status,a=i.align,s=o?n:r;return(0,F.deepMerge)((0,L.deepClone)(s,!0),a)}function m(e,t){var n=e.textStyle,i=e.textUnselectedStyle,o=e.data[t],a=o.status,s=(0,r.default)(o.textPosition,2),l=s[0],d=s[1],c=o.textWidth,u=(a?n:i).fontSize;return[l,d-u/2,c,u]}function A(e,t,n){var r=e.data[t].name;return function(){var e=n.chart,i=e.legendStatus,o=e.option,a=!i[t];o.series.find((function(e){return e.name===r})).show=a,i[t]=a,n.chart.setOption(o)}}}));C(Sn);Sn.legend;var On=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"mergeColor",{enumerable:!0,get:function(){return An.mergeColor}}),Object.defineProperty(t,"title",{enumerable:!0,get:function(){return bn.title}}),Object.defineProperty(t,"grid",{enumerable:!0,get:function(){return yn.grid}}),Object.defineProperty(t,"axis",{enumerable:!0,get:function(){return xn.axis}}),Object.defineProperty(t,"line",{enumerable:!0,get:function(){return wn.line}}),Object.defineProperty(t,"bar",{enumerable:!0,get:function(){return kn.bar}}),Object.defineProperty(t,"pie",{enumerable:!0,get:function(){return En.pie}}),Object.defineProperty(t,"radarAxis",{enumerable:!0,get:function(){return Bn.radarAxis}}),Object.defineProperty(t,"radar",{enumerable:!0,get:function(){return Pn.radar}}),Object.defineProperty(t,"gauge",{enumerable:!0,get:function(){return _n.gauge}}),Object.defineProperty(t,"legend",{enumerable:!0,get:function(){return Sn.legend}})}));C(On);var In=b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=y(_),r=y(jt),i=y(Vt),o=function e(t){if((0,r.default)(this,e),!t)return console.error("Charts Missing parameters!"),!1;var n=t.clientWidth,o=t.clientHeight,a=document.createElement("canvas");a.setAttribute("width",n),a.setAttribute("height",o),t.appendChild(a);var s={container:t,canvas:a,render:new i.default(a),option:null};Object.assign(this,s)};t.default=o,o.prototype.setOption=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!e||"object"!==(0,n.default)(e))return console.error("setOption Missing parameters!"),!1;t&&this.render.graphs.forEach((function(e){return e.animationEnd()}));var r=(0,L.deepClone)(e,!0);(0,On.mergeColor)(this,r),(0,On.grid)(this,r),(0,On.axis)(this,r),(0,On.radarAxis)(this,r),(0,On.title)(this,r),(0,On.bar)(this,r),(0,On.line)(this,r),(0,On.pie)(this,r),(0,On.radar)(this,r),(0,On.gauge)(this,r),(0,On.legend)(this,r),this.option=e,this.render.launchAnimation()},o.prototype.resize=function(){var e=this.container,t=this.canvas,n=this.render,r=this.option,i=e.clientWidth,o=e.clientHeight;t.setAttribute("width",i),t.setAttribute("height",o),n.area=[i,o],this.setOption(r)}}));C(In);var Wn=C(b((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"changeDefaultConfig",{enumerable:!0,get:function(){return mn.changeDefaultConfig}}),t.default=void 0;var n=y(In).default;t.default=n})));const Ln={name:"DvCharts",mixins:[i],props:{option:{type:Object,default:()=>({})}},data(){const e=r();return{ref:"charts-container-"+e,chartRef:"chart-"+e,chart:null}},watch:{option(){let{chart:e,option:t}=this;e&&(t||(t={}),e.setOption(t,!0))}},methods:{afterAutoResizeMixinInit(){const{initChart:e}=this;e()},initChart(){const{$refs:e,chartRef:t,option:n}=this,r=this.chart=new Wn(e[t]);n&&r.setOption(n)},onResize(){const{chart:e}=this;e&&e.resize()}}};var jn=function(){var e=this.$createElement,t=this._self._c||e;return t("div",{ref:this.ref,staticClass:"dv-charts-container"},[t("div",{ref:this.chartRef,staticClass:"charts-canvas-container"})])};jn._withStripped=!0;const Mn=a({render:jn,staticRenderFns:[]},(function(e){e&&e("data-v-1f446fe6_0",{source:".dv-charts-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-charts-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),Ln,void 0,!1,void 0,!1,l,void 0,void 0);function Fn(e){e.component(Mn.name,Mn)}const Dn={name:"DvDigitalFlop",props:{config:{type:Object,default:()=>({})}},data:()=>({renderer:null,defaultConfig:{number:[],content:"",toFixed:0,textAlign:"center",rowGap:0,style:{fontSize:30,fill:"#3de7c9"},formatter:void 0,animationCurve:"easeOutCubic",animationFrame:50},mergedConfig:null,graph:null}),watch:{config(){const{update:e}=this;e()}},methods:{init(){const{initRender:e,mergeConfig:t,initGraph:n}=this;e(),t(),n()},initRender(){const{$refs:e}=this;this.renderer=new qt(e["digital-flop"])},mergeConfig(){const{defaultConfig:e,config:t}=this;this.mergedConfig=D(j(e,!0),t||{})},initGraph(){const{getShape:e,getStyle:t,renderer:n,mergedConfig:r}=this,{animationCurve:i,animationFrame:o}=r,a=e(),s=t();this.graph=n.add({name:"numberText",animationCurve:i,animationFrame:o,shape:a,style:s})},getShape(){const{number:e,content:t,toFixed:n,textAlign:r,rowGap:i,formatter:o}=this.mergedConfig,[a,s]=this.renderer.area,l=[a/2,s/2];return"left"===r&&(l[0]=0),"right"===r&&(l[0]=a),{number:e,content:t,toFixed:n,position:l,rowGap:i,formatter:o}},getStyle(){const{style:e,textAlign:t}=this.mergedConfig;return D(e,{textAlign:t,textBaseline:"middle"})},update(){const{mergeConfig:e,mergeShape:t,getShape:n,getStyle:r,graph:i,mergedConfig:o}=this;if(i.animationEnd(),e(),!i)return;const{animationCurve:a,animationFrame:s}=o,l=n(),d=r();t(i,l),i.animationCurve=a,i.animationFrame=s,i.animation("style",d,!0),i.animation("shape",l)},mergeShape(e,t){e.shape.number.length!==t.number.length&&(e.shape.number=t.number)}},mounted(){const{init:e}=this;e()}};var Rn=function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"dv-digital-flop"},[t("canvas",{ref:"digital-flop"})])};Rn._withStripped=!0;const Gn=a({render:Rn,staticRenderFns:[]},(function(e){e&&e("data-v-113591fb_0",{source:".dv-digital-flop canvas {\n  width: 100%;\n  height: 100%;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,WAAW;EACX,YAAY;AACd",file:"main.vue",sourcesContent:[".dv-digital-flop canvas {\n  width: 100%;\n  height: 100%;\n}\n"]},media:void 0})}),Dn,void 0,!1,void 0,!1,l,void 0,void 0);const zn={name:"DvActiveRingChart",components:{dvDigitalFlop:Gn},props:{config:{type:Object,default:()=>({})}},data:()=>({defaultConfig:{radius:"50%",activeRadius:"55%",data:[{name:"",value:0}],lineWidth:20,activeTimeGap:3e3,color:[],digitalFlopStyle:{fontSize:25,fill:"#fff"},digitalFlopToFixed:0,digitalFlopUnit:"",animationCurve:"easeOutCubic",animationFrame:50,showOriginValue:!1},mergedConfig:null,chart:null,activeIndex:0,animationHandler:""}),computed:{digitalFlop(){const{mergedConfig:e,activeIndex:t}=this;if(!e)return{};const{digitalFlopStyle:n,digitalFlopToFixed:r,data:i,showOriginValue:o,digitalFlopUnit:a}=e,s=i.map(({value:e})=>e);let l;if(o)l=s[t];else{const e=s.reduce((e,t)=>e+t,0);l=parseFloat(s[t]/e*100)||0}return{content:o?"{nt}"+a:"{nt}"+(a||"%"),number:[l],style:n,toFixed:r}},ringName(){const{mergedConfig:e,activeIndex:t}=this;return e?e.data[t].name:""},fontSize(){const{mergedConfig:e}=this;return e?`font-size: ${e.digitalFlopStyle.fontSize}px;`:""}},watch:{config(){const{animationHandler:e,mergeConfig:t,setRingOption:n}=this;clearTimeout(e),this.activeIndex=0,t(),n()}},methods:{init(){const{initChart:e,mergeConfig:t,setRingOption:n}=this;e(),t(),n()},initChart(){const{$refs:e}=this;this.chart=new Wn(e["active-ring-chart"])},mergeConfig(){const{defaultConfig:e,config:t}=this;this.mergedConfig=D(j(e,!0),t||{})},setRingOption(){const{getRingOption:e,chart:t,ringAnimation:n}=this,r=e();t.setOption(r,!0),n()},getRingOption(){const{mergedConfig:e,getRealRadius:t}=this,n=t();return e.data.forEach(e=>{e.radius=n}),{series:[{type:"pie",...e,outsideLabel:{show:!1}}],color:e.color}},getRealRadius(e=!1){const{mergedConfig:t,chart:n}=this,{radius:r,activeRadius:i,lineWidth:o}=t,a=Math.min(...n.render.area)/2,s=o/2;let l=e?i:r;"number"!=typeof l&&(l=parseInt(l)/100*a);return[l-s,l+s]},ringAnimation(){let{activeIndex:e,getRingOption:t,chart:n,getRealRadius:r}=this;const i=r(),o=r(!0),a=t(),{data:s}=a.series[0];s.forEach((t,n)=>{t.radius=n===e?o:i}),n.setOption(a,!0);const{activeTimeGap:l}=a.series[0];this.animationHandler=setTimeout(t=>{e+=1,e>=s.length&&(e=0),this.activeIndex=e,this.ringAnimation()},l)}},mounted(){const{init:e}=this;e()},beforeDestroy(){const{animationHandler:e}=this;clearTimeout(e)}};var Tn=function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"dv-active-ring-chart"},[t("div",{ref:"active-ring-chart",staticClass:"active-ring-chart-container"}),this._v(" "),t("div",{staticClass:"active-ring-info"},[t("dv-digital-flop",{attrs:{config:this.digitalFlop}}),this._v(" "),t("div",{staticClass:"active-ring-name",style:this.fontSize},[this._v(this._s(this.ringName))])],1)])};Tn._withStripped=!0;const Yn=a({render:Tn,staticRenderFns:[]},(function(e){e&&e("data-v-ca8abc0a_0",{source:".dv-active-ring-chart {\n  position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n  width: 100%;\n  height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n  width: 100px;\n  height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n  width: 100px;\n  height: 30px;\n  color: #fff;\n  text-align: center;\n  vertical-align: middle;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,mBAAmB;AACrB;AACA;EACE,YAAY;EACZ,YAAY;AACd;AACA;EACE,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,kBAAkB;EAClB,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;EAChB,mBAAmB;AACrB",file:"main.vue",sourcesContent:[".dv-active-ring-chart {\n  position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n  width: 100%;\n  height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n  width: 100px;\n  height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n  width: 100px;\n  height: 30px;\n  color: #fff;\n  text-align: center;\n  vertical-align: middle;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n"]},media:void 0})}),zn,void 0,!1,void 0,!1,l,void 0,void 0);function Nn(e){e.component(Yn.name,Yn)}const Xn={name:"DvCapsuleChart",props:{config:{type:Object,default:()=>({})}},data:()=>({defaultConfig:{data:[],colors:["#37a2da","#32c5e9","#67e0e3","#9fe6b8","#ffdb5c","#ff9f7f","#fb7293"],unit:"",showValue:!1},mergedConfig:null,capsuleLength:[],capsuleValue:[],labelData:[],labelDataLength:[]}),watch:{config(){const{calcData:e}=this;e()}},methods:{calcData(){const{mergeConfig:e,calcCapsuleLengthAndLabelData:t}=this;e(),t()},mergeConfig(){let{config:e,defaultConfig:t}=this;this.mergedConfig=D(j(t,!0),e||{})},calcCapsuleLengthAndLabelData(){const{data:e}=this.mergedConfig;if(!e.length)return;const t=e.map(({value:e})=>e),n=Math.max(...t);this.capsuleValue=t,this.capsuleLength=t.map(e=>n?e/n:0);const r=n/5,i=Array.from(new Set(new Array(6).fill(0).map((e,t)=>Math.ceil(t*r))));this.labelData=i,this.labelDataLength=Array.from(i).map(e=>n?e/n:0)}},mounted(){const{calcData:e}=this;e()}};var $n=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"dv-capsule-chart"},[e.mergedConfig?[n("div",{staticClass:"label-column"},[e._l(e.mergedConfig.data,(function(t){return n("div",{key:t.name},[e._v(e._s(t.name))])})),e._v(" "),n("div",[e._v(" ")])],2),e._v(" "),n("div",{staticClass:"capsule-container"},[e._l(e.capsuleLength,(function(t,r){return n("div",{key:r,staticClass:"capsule-item"},[n("div",{staticClass:"capsule-item-column",style:"width: "+100*t+"%; background-color: "+e.mergedConfig.colors[r%e.mergedConfig.colors.length]+";"},[e.mergedConfig.showValue?n("div",{staticClass:"capsule-item-value"},[e._v(e._s(e.capsuleValue[r]))]):e._e()])])})),e._v(" "),n("div",{staticClass:"unit-label"},e._l(e.labelData,(function(t,r){return n("div",{key:t+r},[e._v(e._s(t))])})),0)],2),e._v(" "),e.mergedConfig.unit?n("div",{staticClass:"unit-text"},[e._v(e._s(e.mergedConfig.unit))]):e._e()]:e._e()],2)};$n._withStripped=!0;const Hn=a({render:$n,staticRenderFns:[]},(function(e){e&&e("data-v-6f678c1a_0",{source:".dv-capsule-chart {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 10px;\n  color: #fff;\n}\n.dv-capsule-chart .label-column {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  box-sizing: border-box;\n  padding-right: 10px;\n  text-align: right;\n  font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n  height: 20px;\n  line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n  box-shadow: 0 0 3px #999;\n  height: 10px;\n  margin: 5px 0px;\n  border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column {\n  position: relative;\n  height: 8px;\n  margin-top: 1px;\n  border-radius: 5px;\n  transition: all 0.3s;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {\n  font-size: 12px;\n  transform: translateX(100%);\n}\n.dv-capsule-chart .unit-label {\n  height: 20px;\n  font-size: 12px;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.dv-capsule-chart .unit-text {\n  text-align: right;\n  display: flex;\n  align-items: flex-end;\n  font-size: 12px;\n  line-height: 20px;\n  margin-left: 10px;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,mBAAmB;EACnB,sBAAsB;EACtB,aAAa;EACb,WAAW;AACb;AACA;EACE,aAAa;EACb,sBAAsB;EACtB,8BAA8B;EAC9B,sBAAsB;EACtB,mBAAmB;EACnB,iBAAiB;EACjB,eAAe;AACjB;AACA;EACE,YAAY;EACZ,iBAAiB;AACnB;AACA;EACE,OAAO;EACP,aAAa;EACb,sBAAsB;EACtB,8BAA8B;AAChC;AACA;EACE,wBAAwB;EACxB,YAAY;EACZ,eAAe;EACf,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,eAAe;EACf,kBAAkB;EAClB,oBAAoB;EACpB,aAAa;EACb,yBAAyB;EACzB,mBAAmB;AACrB;AACA;EACE,eAAe;EACf,2BAA2B;AAC7B;AACA;EACE,YAAY;EACZ,eAAe;EACf,kBAAkB;EAClB,aAAa;EACb,8BAA8B;EAC9B,mBAAmB;AACrB;AACA;EACE,iBAAiB;EACjB,aAAa;EACb,qBAAqB;EACrB,eAAe;EACf,iBAAiB;EACjB,iBAAiB;AACnB",file:"main.vue",sourcesContent:[".dv-capsule-chart {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 10px;\n  color: #fff;\n}\n.dv-capsule-chart .label-column {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  box-sizing: border-box;\n  padding-right: 10px;\n  text-align: right;\n  font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n  height: 20px;\n  line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n  box-shadow: 0 0 3px #999;\n  height: 10px;\n  margin: 5px 0px;\n  border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column {\n  position: relative;\n  height: 8px;\n  margin-top: 1px;\n  border-radius: 5px;\n  transition: all 0.3s;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {\n  font-size: 12px;\n  transform: translateX(100%);\n}\n.dv-capsule-chart .unit-label {\n  height: 20px;\n  font-size: 12px;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.dv-capsule-chart .unit-text {\n  text-align: right;\n  display: flex;\n  align-items: flex-end;\n  font-size: 12px;\n  line-height: 20px;\n  margin-left: 10px;\n}\n"]},media:void 0})}),Xn,void 0,!1,void 0,!1,l,void 0,void 0);function Qn(e){e.component(Hn.name,Hn)}const Un={name:"DvWaterLevelPond",props:{config:Object,default:()=>({})},data:()=>({gradientId:"water-level-pond-"+r(),defaultConfig:{data:[],shape:"rect",waveNum:3,waveHeight:40,waveOpacity:.4,colors:["#3DE7C9","#00BAFF"],formatter:"{value}%"},mergedConfig:{},renderer:null,svgBorderGradient:[],details:"",waves:[],animation:!1}),computed:{radius(){const{shape:e}=this.mergedConfig;return"round"===e?"50%":"rect"===e?"0":"roundRect"===e?"10px":"0"},shape(){const{shape:e}=this.mergedConfig;return e||"rect"}},watch:{config(){const{calcData:e,renderer:t}=this;t.delAllGraph(),this.waves=[],setTimeout(e,0)}},methods:{init(){const{initRender:e,config:t,calcData:n}=this;e(),t&&n()},initRender(){const{$refs:e}=this;this.renderer=new qt(e["water-pond-level"])},calcData(){const{mergeConfig:e,calcSvgBorderGradient:t,calcDetails:n}=this;e(),t(),n();const{addWave:r,animationWave:i}=this;r(),i()},mergeConfig(){const{config:e,defaultConfig:t}=this;this.mergedConfig=D(j(t,!0),e)},calcSvgBorderGradient(){const{colors:e}=this.mergedConfig,t=100/(e.length-1);this.svgBorderGradient=e.map((e,n)=>[t*n,e])},calcDetails(){const{data:e,formatter:t}=this.mergedConfig;if(!e.length)return void(this.details="");const n=Math.max(...e);this.details=t.replace("{value}",n)},addWave(){const{renderer:e,getWaveShapes:t,getWaveStyle:n,drawed:r}=this,i=t(),o=n();this.waves=i.map(t=>e.add({name:"smoothline",animationFrame:300,shape:t,style:o,drawed:r}))},getWaveShapes(){const{mergedConfig:e,renderer:t,mergeOffset:n}=this,{waveNum:r,waveHeight:i,data:o}=e,[a,s]=t.area,l=4*r+4,d=a/r/2;return o.map(e=>{let t=new Array(l).fill(0).map((t,n)=>{const r=(1-e/100)*s;return[a-d*n,n%2==0?r:r-i]});return t=t.map(e=>n(e,[2*d,0])),{points:t}})},mergeOffset:([e,t],[n,r])=>[e+n,t+r],getWaveStyle(){const{renderer:e,mergedConfig:t}=this,n=e.area[1];return{gradientColor:t.colors,gradientType:"linear",gradientParams:[0,0,0,n],gradientWith:"fill",opacity:t.waveOpacity,translate:[0,0]}},drawed({shape:{points:e}},{ctx:t,area:n}){const r=e[0],i=e.slice(-1)[0],o=n[1];t.lineTo(i[0],o),t.lineTo(r[0],o),t.closePath(),t.fill()},async animationWave(e=1){const{waves:t,renderer:n,animation:r}=this;if(r)return;this.animation=!0;const i=n.area[0];t.forEach(e=>{e.attr("style",{translate:[0,0]}),e.animation("style",{translate:[i,0]},!0)}),await n.launchAnimation(),this.animation=!1,n.graphs.length&&this.animationWave(e+1)}},mounted(){const{init:e}=this;e()},beforeDestroy(){const{renderer:e}=this;e.delAllGraph(),this.waves=[]}};var Vn=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"dv-water-pond-level"},[e.renderer?n("svg",[n("defs",[n("linearGradient",{attrs:{id:e.gradientId,x1:"0%",y1:"0%",x2:"0%",y2:"100%"}},e._l(e.svgBorderGradient,(function(e){return n("stop",{key:e[0],attrs:{offset:e[0],"stop-color":e[1]}})})),1)],1),e._v(" "),e.renderer?n("text",{attrs:{stroke:"url(#"+e.gradientId+")",fill:"url(#"+e.gradientId+")",x:e.renderer.area[0]/2+8,y:e.renderer.area[1]/2+8}},[e._v("\n      "+e._s(e.details)+"\n    ")]):e._e(),e._v(" "),e.shape&&"round"!==e.shape?n("rect",{attrs:{x:"2",y:"2",rx:"roundRect"===e.shape?10:0,ry:"roundRect"===e.shape?10:0,width:e.renderer.area[0]+12,height:e.renderer.area[1]+12,stroke:"url(#"+e.gradientId+")"}}):n("ellipse",{attrs:{cx:e.renderer.area[0]/2+8,cy:e.renderer.area[1]/2+8,rx:e.renderer.area[0]/2+5,ry:e.renderer.area[1]/2+5,stroke:"url(#"+e.gradientId+")"}})]):e._e(),e._v(" "),n("canvas",{ref:"water-pond-level",style:"border-radius: "+e.radius+";"})])};Vn._withStripped=!0;const qn=a({render:Vn,staticRenderFns:[]},(function(e){e&&e("data-v-be672a2c_0",{source:".dv-water-pond-level {\n  position: relative;\n}\n.dv-water-pond-level svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-water-pond-level text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n  fill: none;\n  stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n  margin-top: 8px;\n  margin-left: 8px;\n  width: calc(100% - 16px);\n  height: calc(100% - 16px);\n  box-sizing: border-box;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B;AACA;;EAEE,UAAU;EACV,eAAe;AACjB;AACA;EACE,eAAe;EACf,gBAAgB;EAChB,wBAAwB;EACxB,yBAAyB;EACzB,sBAAsB;AACxB",file:"main.vue",sourcesContent:[".dv-water-pond-level {\n  position: relative;\n}\n.dv-water-pond-level svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-water-pond-level text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n  fill: none;\n  stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n  margin-top: 8px;\n  margin-left: 8px;\n  width: calc(100% - 16px);\n  height: calc(100% - 16px);\n  box-sizing: border-box;\n}\n"]},media:void 0})}),Un,void 0,!1,void 0,!1,l,void 0,void 0);function Zn(e){e.component(qn.name,qn)}const Kn={name:"DvPercentPond",props:{config:{type:Object,default:()=>({})}},data(){const e=r();return{gradientId1:"percent-pond-gradientId1-"+e,gradientId2:"percent-pond-gradientId2-"+e,width:0,height:0,defaultConfig:{value:0,colors:["#3DE7C9","#00BAFF"],borderWidth:3,borderGap:3,lineDash:[5,1],textColor:"#fff",borderRadius:5,localGradient:!1,formatter:"{value}%"},mergedConfig:null}},computed:{rectWidth(){const{mergedConfig:e,width:t}=this;if(!e)return 0;const{borderWidth:n}=e;return t-n},rectHeight(){const{mergedConfig:e,height:t}=this;if(!e)return 0;const{borderWidth:n}=e;return t-n},points(){const{mergedConfig:e,width:t,height:n}=this,r=n/2;if(!e)return`0, ${r} 0, ${r}`;const{borderWidth:i,borderGap:o,value:a}=e;return`\n        ${i+o}, ${r}\n        ${i+o+(t-2*(i+o))/100*a}, ${r+.001}\n      `},polylineWidth(){const{mergedConfig:e,height:t}=this;if(!e)return 0;const{borderWidth:n,borderGap:r}=e;return t-2*(n+r)},linearGradient(){const{mergedConfig:e}=this;if(!e)return[];const{colors:t}=e,n=100/(t.length-1);return t.map((e,t)=>[n*t,e])},polylineGradient(){const{gradientId1:e,gradientId2:t,mergedConfig:n}=this;return n&&n.localGradient?e:t},gradient2XPos(){const{mergedConfig:e}=this;if(!e)return"100%";const{value:t}=e;return 200-t+"%"},details(){const{mergedConfig:e}=this;if(!e)return"";const{value:t,formatter:n}=e;return n.replace("{value}",t)}},watch:{config(){const{mergeConfig:e}=this;e()}},methods:{async init(){const{initWH:e,config:t,mergeConfig:n}=this;await e(),t&&n()},async initWH(){const{$nextTick:e,$refs:t}=this;await e();const{clientWidth:n,clientHeight:r}=t["percent-pond"];this.width=n,this.height=r},mergeConfig(){const{config:e,defaultConfig:t}=this;this.mergedConfig=D(j(t,!0),e||{})}},mounted(){const{init:e}=this;e()}};var Jn=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"percent-pond",staticClass:"dv-percent-pond"},[n("svg",[n("defs",[n("linearGradient",{attrs:{id:e.gradientId1,x1:"0%",y1:"0%",x2:"100%",y2:"0%"}},e._l(e.linearGradient,(function(e){return n("stop",{key:e[0],attrs:{offset:e[0]+"%","stop-color":e[1]}})})),1),e._v(" "),n("linearGradient",{attrs:{id:e.gradientId2,x1:"0%",y1:"0%",x2:e.gradient2XPos,y2:"0%"}},e._l(e.linearGradient,(function(e){return n("stop",{key:e[0],attrs:{offset:e[0]+"%","stop-color":e[1]}})})),1)],1),e._v(" "),n("rect",{attrs:{x:e.mergedConfig?e.mergedConfig.borderWidth/2:"0",y:e.mergedConfig?e.mergedConfig.borderWidth/2:"0",rx:e.mergedConfig?e.mergedConfig.borderRadius:"0",ry:e.mergedConfig?e.mergedConfig.borderRadius:"0",fill:"transparent","stroke-width":e.mergedConfig?e.mergedConfig.borderWidth:"0",stroke:"url(#"+e.gradientId1+")",width:e.rectWidth>0?e.rectWidth:0,height:e.rectHeight>0?e.rectHeight:0}}),e._v(" "),n("polyline",{attrs:{"stroke-width":e.polylineWidth,"stroke-dasharray":e.mergedConfig?e.mergedConfig.lineDash.join(","):"0",stroke:"url(#"+e.polylineGradient+")",points:e.points}}),e._v(" "),n("text",{attrs:{stroke:e.mergedConfig?e.mergedConfig.textColor:"#fff",fill:e.mergedConfig?e.mergedConfig.textColor:"#fff",x:e.width/2,y:e.height/2}},[e._v("\n      "+e._s(e.details)+"\n    ")])])])};Jn._withStripped=!0;const er=a({render:Jn,staticRenderFns:[]},(function(e){e&&e("data-v-05a0166f_0",{source:".dv-percent-pond {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.dv-percent-pond svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-percent-pond polyline {\n  transition: all 0.3s;\n}\n.dv-percent-pond text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,sBAAsB;AACxB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,WAAW;EACX,YAAY;AACd;AACA;EACE,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B",file:"main.vue",sourcesContent:[".dv-percent-pond {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.dv-percent-pond svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-percent-pond polyline {\n  transition: all 0.3s;\n}\n.dv-percent-pond text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n"]},media:void 0})}),Kn,void 0,!1,void 0,!1,l,void 0,void 0);function tr(e){e.component(er.name,er)}const nr={name:"DvFlylineChart",mixins:[i],props:{config:{type:Object,default:()=>({})},dev:{type:Boolean,default:!1}},data(){const e=r();return{ref:"dv-flyline-chart",unique:Math.random(),maskId:"flyline-mask-id-"+e,maskCircleId:"mask-circle-id-"+e,gradientId:"gradient-id-"+e,gradient2Id:"gradient2-id-"+e,defaultConfig:{centerPoint:[0,0],points:[],lineWidth:1,orbitColor:"rgba(103, 224, 227, .2)",flylineColor:"#ffde93",k:-.5,curvature:5,flylineRadius:100,duration:[20,30],relative:!0,bgImgUrl:"",text:{offset:[0,15],color:"#ffdb5c",fontSize:12},halo:{show:!0,duration:30,color:"#fb7293",radius:120},centerPointImg:{width:40,height:40,url:""},pointsImg:{width:15,height:15,url:""}},mergedConfig:null,paths:[],lengths:[],times:[],texts:[]}},watch:{config(){const{calcData:e}=this;e()}},methods:{afterAutoResizeMixinInit(){const{calcData:e}=this;e()},onResize(){const{calcData:e}=this;e()},async calcData(){const{mergeConfig:e,createFlylinePaths:t,calcLineLengths:n}=this;e(),t(),await n();const{calcTimes:r,calcTexts:i}=this;r(),i()},mergeConfig(){let{config:e,defaultConfig:t}=this;const n=D(j(t,!0),e||{}),{points:r}=n;n.points=r.map(e=>e instanceof Array?{position:e,text:""}:e),this.mergedConfig=n},createFlylinePaths(){const{getPath:e,mergedConfig:t,width:n,height:r}=this;let{centerPoint:i,points:o,relative:a}=t;o=o.map(({position:e})=>e),a&&(i=[n*i[0],r*i[1]],o=o.map(([e,t])=>[n*e,r*t])),this.paths=o.map(t=>e(i,t))},getPath(e,t){const{getControlPoint:n}=this;return[t,n(e,t),e]},getControlPoint([e,t],[r,i]){const{getKLinePointByx:o,mergedConfig:a}=this,{curvature:s,k:l}=a,[d,c]=[(e+r)/2,(t+i)/2],u=n([e,t],[r,i])/s,h=u/2;let[f,p]=[d,c];do{f+=h,p=o(l,[d,c],f)[1]}while(n([d,c],[f,p])<u);return[f,p]},getKLinePointByx:(e,[t,n],r)=>[r,n-e*t+e*r],async calcLineLengths(){const{$nextTick:e,paths:t,$refs:n}=this;await e(),this.lengths=t.map((e,t)=>n["path"+t][0].getTotalLength())},calcTimes(){const{duration:e,points:n}=this.mergedConfig;this.times=n.map(n=>t(...e)/10)},calcTexts(){const{points:e}=this.mergedConfig;this.texts=e.map(({text:e})=>e)},consoleClickPos({offsetX:e,offsetY:t}){const{width:n,height:r,dev:i}=this;if(!i)return;const o=(e/n).toFixed(2),a=(t/r).toFixed(2);console.warn(`dv-flyline-chart DEV: \n Click Position is [${e}, ${t}] \n Relative Position is [${o}, ${a}]`)}}};var rr=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"dv-flyline-chart",staticClass:"dv-flyline-chart",style:"background-image: url("+(e.mergedConfig?e.mergedConfig.bgImgUrl:"")+")",on:{click:e.consoleClickPos}},[e.mergedConfig?n("svg",{attrs:{width:e.width,height:e.height}},[n("defs",[n("radialGradient",{attrs:{id:e.gradientId,cx:"50%",cy:"50%",r:"50%"}},[n("stop",{attrs:{offset:"0%","stop-color":"#fff","stop-opacity":"1"}}),e._v(" "),n("stop",{attrs:{offset:"100%","stop-color":"#fff","stop-opacity":"0"}})],1),e._v(" "),n("radialGradient",{attrs:{id:e.gradient2Id,cx:"50%",cy:"50%",r:"50%"}},[n("stop",{attrs:{offset:"0%","stop-color":"#fff","stop-opacity":"0"}}),e._v(" "),n("stop",{attrs:{offset:"100%","stop-color":"#fff","stop-opacity":"1"}})],1),e._v(" "),e.paths[0]?n("circle",{attrs:{id:"circle"+e.paths[0].toString(),cx:e.paths[0][2][0],cy:e.paths[0][2][1]}},[n("animate",{attrs:{attributeName:"r",values:"1;"+e.mergedConfig.halo.radius,dur:e.mergedConfig.halo.duration/10+"s",repeatCount:"indefinite"}}),e._v(" "),n("animate",{attrs:{attributeName:"opacity",values:"1;0",dur:e.mergedConfig.halo.duration/10+"s",repeatCount:"indefinite"}})]):e._e()],1),e._v(" "),e.paths[0]?n("image",{attrs:{"xlink:href":e.mergedConfig.centerPointImg.url,width:e.mergedConfig.centerPointImg.width,height:e.mergedConfig.centerPointImg.height,x:e.paths[0][2][0]-e.mergedConfig.centerPointImg.width/2,y:e.paths[0][2][1]-e.mergedConfig.centerPointImg.height/2}}):e._e(),e._v(" "),n("mask",{attrs:{id:"maskhalo"+e.paths[0].toString()}},[e.paths[0]?n("use",{attrs:{"xlink:href":"#circle"+e.paths[0].toString(),fill:"url(#"+e.gradient2Id+")"}}):e._e()]),e._v(" "),e.paths[0]&&e.mergedConfig.halo.show?n("use",{attrs:{"xlink:href":"#circle"+e.paths[0].toString(),fill:e.mergedConfig.halo.color,mask:"url(#maskhalo"+e.paths[0].toString()+")"}}):e._e(),e._v(" "),e._l(e.paths,(function(t,r){return n("g",{key:r},[n("defs",[n("path",{ref:"path"+r,refInFor:!0,attrs:{id:"path"+t.toString(),d:"M"+t[0].toString()+" Q"+t[1].toString()+" "+t[2].toString(),fill:"transparent"}})]),e._v(" "),n("use",{attrs:{"xlink:href":"#path"+t.toString(),"stroke-width":e.mergedConfig.lineWidth,stroke:e.mergedConfig.orbitColor}}),e._v(" "),e.lengths[r]?n("use",{attrs:{"xlink:href":"#path"+t.toString(),"stroke-width":e.mergedConfig.lineWidth,stroke:e.mergedConfig.flylineColor,mask:"url(#mask"+e.unique+t.toString()+")"}},[n("animate",{attrs:{attributeName:"stroke-dasharray",from:"0, "+e.lengths[r],to:e.lengths[r]+", 0",dur:e.times[r]||0,repeatCount:"indefinite"}})]):e._e(),e._v(" "),n("mask",{attrs:{id:"mask"+e.unique+t.toString()}},[n("circle",{attrs:{cx:"0",cy:"0",r:e.mergedConfig.flylineRadius,fill:"url(#"+e.gradientId+")"}},[n("animateMotion",{attrs:{dur:e.times[r]||0,path:"M"+t[0].toString()+" Q"+t[1].toString()+" "+t[2].toString(),rotate:"auto",repeatCount:"indefinite"}})],1)]),e._v(" "),n("image",{attrs:{"xlink:href":e.mergedConfig.pointsImg.url,width:e.mergedConfig.pointsImg.width,height:e.mergedConfig.pointsImg.height,x:t[0][0]-e.mergedConfig.pointsImg.width/2,y:t[0][1]-e.mergedConfig.pointsImg.height/2}}),e._v(" "),n("text",{style:"fontSize:"+e.mergedConfig.text.fontSize+"px;",attrs:{fill:e.mergedConfig.text.color,x:t[0][0]+e.mergedConfig.text.offset[0],y:t[0][1]+e.mergedConfig.text.offset[1]}},[e._v("\n        "+e._s(e.texts[r])+"\n      ")])])}))],2):e._e()])};rr._withStripped=!0;const ir=a({render:rr,staticRenderFns:[]},(function(e){e&&e("data-v-1edfcf29_0",{source:".dv-flyline-chart {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n  transition: all 0.3s;\n}\n.dv-flyline-chart text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,oBAAoB;AACtB;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B",file:"main.vue",sourcesContent:[".dv-flyline-chart {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n  transition: all 0.3s;\n}\n.dv-flyline-chart text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n"]},media:void 0})}),nr,void 0,!1,void 0,!1,l,void 0,void 0);function or(e){e.component(ir.name,ir)}const ar={name:"DvFlylineChartEnhanced",mixins:[i],props:{config:{type:Object,default:()=>({})},dev:{type:Boolean,default:!1}},data(){const e=r();return{ref:"dv-flyline-chart-enhanced",unique:Math.random(),flylineGradientId:"flyline-gradient-id-"+e,haloGradientId:"halo-gradient-id-"+e,defaultConfig:{points:[],lines:[],halo:{show:!1,duration:[20,30],color:"#fb7293",radius:120},text:{show:!1,offset:[0,15],color:"#ffdb5c",fontSize:12},icon:{show:!1,src:"",width:15,height:15},line:{width:1,color:"#ffde93",orbitColor:"rgba(103, 224, 227, .2)",duration:[20,30],radius:100},bgImgSrc:"",k:-.5,curvature:5,relative:!0},flylines:[],flylineLengths:[],flylinePoints:[],mergedConfig:null}},watch:{config(){const{calcData:e}=this;e()}},methods:{afterAutoResizeMixinInit(){const{calcData:e}=this;e()},onResize(){const{calcData:e}=this;e()},async calcData(){const{mergeConfig:e,calcflylinePoints:t,calcLinePaths:n}=this;e(),t(),n();const{calcLineLengths:r}=this;await r()},mergeConfig(){let{config:e,defaultConfig:t}=this;const n=D(j(t,!0),e||{}),{points:r,lines:i,halo:o,text:a,icon:s,line:l}=n;n.points=r.map(e=>(e.halo=D(j(o,!0),e.halo||{}),e.text=D(j(a,!0),e.text||{}),e.icon=D(j(s,!0),e.icon||{}),e)),n.lines=i.map(e=>D(j(l,!0),e)),this.mergedConfig=n},calcflylinePoints(){const{mergedConfig:e,width:n,height:r}=this,{relative:i,points:o}=e;this.flylinePoints=o.map((e,o)=>{const{coordinate:[a,s],halo:l,icon:d,text:c}=e;i&&(e.coordinate=[a*n,s*r]),e.halo.time=t(...l.duration)/10;const{width:u,height:h}=d;e.icon.x=e.coordinate[0]-u/2,e.icon.y=e.coordinate[1]-h/2;const[f,p]=c.offset;return e.text.x=e.coordinate[0]+f,e.text.y=e.coordinate[1]+p,e.key=`${e.coordinate.toString()}${o}`,e})},calcLinePaths(){const{getPath:e,mergedConfig:n}=this,{points:r,lines:i}=n;this.flylines=i.map(n=>{const{source:i,target:o,duration:a}=n,s=r.find(({name:e})=>e===i).coordinate,l=r.find(({name:e})=>e===o).coordinate,d=e(s,l).map(e=>e.map(e=>parseFloat(e.toFixed(10)))),c=`M${d[0].toString()} Q${d[1].toString()} ${d[2].toString()}`,u="path"+d.toString(),h=t(...a)/10;return{...n,path:d,key:u,d:c,time:h}})},getPath(e,t){const{getControlPoint:n}=this;return[e,n(e,t),t]},getControlPoint([e,t],[r,i]){const{getKLinePointByx:o,mergedConfig:a}=this,{curvature:s,k:l}=a,[d,c]=[(e+r)/2,(t+i)/2],u=n([e,t],[r,i])/s,h=u/2;let[f,p]=[d,c];do{f+=h,p=o(l,[d,c],f)[1]}while(n([d,c],[f,p])<u);return[f,p]},getKLinePointByx:(e,[t,n],r)=>[r,n-e*t+e*r],async calcLineLengths(){const{$nextTick:e,flylines:t,$refs:n}=this;await e(),this.flylineLengths=t.map(({key:e})=>n[e][0].getTotalLength())},consoleClickPos({offsetX:e,offsetY:t}){const{width:n,height:r,dev:i}=this;if(!i)return;const o=(e/n).toFixed(2),a=(t/r).toFixed(2);console.warn(`dv-flyline-chart-enhanced DEV: \n Click Position is [${e}, ${t}] \n Relative Position is [${o}, ${a}]`)}}};var sr=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-flyline-chart-enhanced",style:"background-image: url("+(e.mergedConfig?e.mergedConfig.bgImgSrc:"")+")",on:{click:e.consoleClickPos}},[e.flylines.length?n("svg",{attrs:{width:e.width,height:e.height}},[n("defs",[n("radialGradient",{attrs:{id:e.flylineGradientId,cx:"50%",cy:"50%",r:"50%"}},[n("stop",{attrs:{offset:"0%","stop-color":"#fff","stop-opacity":"1"}}),e._v(" "),n("stop",{attrs:{offset:"100%","stop-color":"#fff","stop-opacity":"0"}})],1),e._v(" "),n("radialGradient",{attrs:{id:e.haloGradientId,cx:"50%",cy:"50%",r:"50%"}},[n("stop",{attrs:{offset:"0%","stop-color":"#fff","stop-opacity":"0"}}),e._v(" "),n("stop",{attrs:{offset:"100%","stop-color":"#fff","stop-opacity":"1"}})],1)],1),e._v(" "),e._l(e.flylinePoints,(function(t){return n("g",{key:t.key+Math.random()},[n("defs",[t.halo.show?n("circle",{attrs:{id:"halo"+e.unique+t.key,cx:t.coordinate[0],cy:t.coordinate[1]}},[n("animate",{attrs:{attributeName:"r",values:"1;"+t.halo.radius,dur:t.halo.time+"s",repeatCount:"indefinite"}}),e._v(" "),n("animate",{attrs:{attributeName:"opacity",values:"1;0",dur:t.halo.time+"s",repeatCount:"indefinite"}})]):e._e()]),e._v(" "),n("mask",{attrs:{id:"mask"+e.unique+t.key}},[t.halo.show?n("use",{attrs:{"xlink:href":"#halo"+e.unique+t.key,fill:"url(#"+e.haloGradientId+")"}}):e._e()]),e._v(" "),t.halo.show?n("use",{attrs:{"xlink:href":"#halo"+e.unique+t.key,fill:t.halo.color,mask:"url(#mask"+e.unique+t.key+")"}}):e._e(),e._v(" "),t.icon.show?n("image",{attrs:{"xlink:href":t.icon.src,width:t.icon.width,height:t.icon.height,x:t.icon.x,y:t.icon.y}}):e._e(),e._v(" "),t.text.show?n("text",{style:"fontSize:"+t.text.fontSize+"px;color:"+t.text.color,attrs:{fill:t.text.color,x:t.text.x,y:t.text.y}},[e._v("\n        "+e._s(t.name)+"\n      ")]):e._e()])})),e._v(" "),e._l(e.flylines,(function(t,r){return n("g",{key:t.key+Math.random()},[n("defs",[n("path",{ref:t.key,refInFor:!0,attrs:{id:t.key,d:t.d,fill:"transparent"}})]),e._v(" "),n("use",{attrs:{"xlink:href":"#"+t.key,"stroke-width":t.width,stroke:t.orbitColor}}),e._v(" "),n("mask",{attrs:{id:"mask"+e.unique+t.key}},[n("circle",{attrs:{cx:"0",cy:"0",r:t.radius,fill:"url(#"+e.flylineGradientId+")"}},[n("animateMotion",{attrs:{dur:t.time,path:t.d,rotate:"auto",repeatCount:"indefinite"}})],1)]),e._v(" "),e.flylineLengths[r]?n("use",{attrs:{"xlink:href":"#"+t.key,"stroke-width":t.width,stroke:t.color,mask:"url(#mask"+e.unique+t.key+")"}},[n("animate",{attrs:{attributeName:"stroke-dasharray",from:"0, "+e.flylineLengths[r],to:e.flylineLengths[r]+", 0",dur:t.time,repeatCount:"indefinite"}})]):e._e()])}))],2):e._e()])};sr._withStripped=!0;const lr=a({render:sr,staticRenderFns:[]},(function(e){e&&e("data-v-a7b8c35c_0",{source:".dv-flyline-chart-enhanced {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B",file:"main.vue",sourcesContent:[".dv-flyline-chart-enhanced {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n"]},media:void 0})}),ar,void 0,!1,void 0,!1,l,void 0,void 0);function dr(e){e.component(lr.name,lr)}const cr={name:"DvConicalColumnChart",mixins:[i],props:{config:{type:Object,default:()=>({})}},data:()=>({ref:"conical-column-chart",defaultConfig:{data:[],img:[],fontSize:12,imgSideLength:30,columnColor:"rgba(0, 194, 255, 0.4)",textColor:"#fff",showValue:!1},mergedConfig:null,column:[]}),watch:{config(){const{calcData:e}=this;e()}},methods:{afterAutoResizeMixinInit(){const{calcData:e}=this;e()},onResize(){const{calcData:e}=this;e()},calcData(){const{mergeConfig:e,initData:t,calcSVGPath:n}=this;e(),t(),n()},mergeConfig(){const{defaultConfig:e,config:t}=this;this.mergedConfig=D(j(e,!0),t||{})},initData(){const{mergedConfig:e}=this;let{data:t}=e;t=j(t,!0),t.sort(({value:e},{value:t})=>e>t?-1:e<t?1:e===t?0:void 0);const n=t[0]?t[0].value:10;t=t.map(e=>({...e,percent:e.value/n})),e.data=t},calcSVGPath(){const{mergedConfig:e,width:t,height:n}=this,{imgSideLength:r,fontSize:i,data:o}=e,a=t/(o.length+1),s=n-r-i-5,l=n-i-5;this.column=o.map((e,t)=>{const{percent:n}=e,r=a*(t+1),o=a*t,d=l-s*n,c=s*n*.6+d,u=`\n          M${o}, ${l}\n          Q${r}, ${c} ${r},${d}\n          M${r},${d}\n          Q${r}, ${c} ${a*(t+2)},${l}\n          L${o}, ${l}\n          Z\n        `,h=(l+d)/2+i/2;return{...e,d:u,x:r,y:d,textY:h}})}}};var ur=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-conical-column-chart"},[n("svg",{attrs:{width:e.width,height:e.height}},e._l(e.column,(function(t,r){return n("g",{key:r},[n("path",{attrs:{d:t.d,fill:e.mergedConfig.columnColor}}),e._v(" "),n("text",{style:"fontSize:"+e.mergedConfig.fontSize+"px",attrs:{fill:e.mergedConfig.textColor,x:t.x,y:e.height-4}},[e._v("\n        "+e._s(t.name)+"\n      ")]),e._v(" "),e.mergedConfig.img.length?n("image",{attrs:{"xlink:href":e.mergedConfig.img[r%e.mergedConfig.img.length],width:e.mergedConfig.imgSideLength,height:e.mergedConfig.imgSideLength,x:t.x-e.mergedConfig.imgSideLength/2,y:t.y-e.mergedConfig.imgSideLength}}):e._e(),e._v(" "),e.mergedConfig.showValue?n("text",{style:"fontSize:"+e.mergedConfig.fontSize+"px",attrs:{fill:e.mergedConfig.textColor,x:t.x,y:t.textY}},[e._v("\n        "+e._s(t.value)+"\n      ")]):e._e()])})),0)])};ur._withStripped=!0;const hr=a({render:ur,staticRenderFns:[]},(function(e){e&&e("data-v-382f06c7_0",{source:".dv-conical-column-chart {\n  width: 100%;\n  height: 100%;\n}\n.dv-conical-column-chart text {\n  text-anchor: middle;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,mBAAmB;AACrB",file:"main.vue",sourcesContent:[".dv-conical-column-chart {\n  width: 100%;\n  height: 100%;\n}\n.dv-conical-column-chart text {\n  text-anchor: middle;\n}\n"]},media:void 0})}),cr,void 0,!1,void 0,!1,l,void 0,void 0);function fr(e){e.component(hr.name,hr)}function pr(e){e.component(Gn.name,Gn)}const gr={name:"DvScrollBoard",mixins:[i],props:{config:{type:Object,default:()=>({})}},data:()=>({ref:"scroll-board",defaultConfig:{header:[],data:[],rowNum:5,headerBGC:"#00BAFF",oddRowBGC:"#003B51",evenRowBGC:"#0A2732",waitTime:2e3,headerHeight:35,columnWidth:[],align:[],index:!1,indexHeader:"#",carousel:"single",hoverPause:!0},mergedConfig:null,header:[],rowsData:[],rows:[],widths:[],heights:[],avgHeight:0,aligns:[],animationIndex:0,animationHandler:"",updater:0,needCalc:!1}),watch:{config(){const{stopAnimation:e,calcData:t}=this;e(),this.animationIndex=0,t()}},methods:{handleHover(e,t,n,r,i){const{mergedConfig:o,emitEvent:a,stopAnimation:s,animation:l}=this;e&&a("mouseover",t,n,r,i),o.hoverPause&&(e?s():l(!0))},afterAutoResizeMixinInit(){const{calcData:e}=this;e()},onResize(){const{mergedConfig:e,calcWidths:t,calcHeights:n}=this;e&&(t(),n())},calcData(){const{mergeConfig:e,calcHeaderData:t,calcRowsData:n}=this;e(),t(),n();const{calcWidths:r,calcHeights:i,calcAligns:o}=this;r(),i(),o();const{animation:a}=this;a(!0)},mergeConfig(){let{config:e,defaultConfig:t}=this;this.mergedConfig=D(j(t,!0),e||{})},calcHeaderData(){let{header:e,index:t,indexHeader:n}=this.mergedConfig;e.length?(e=[...e],t&&e.unshift(n),this.header=e):this.header=[]},calcRowsData(){let{data:e,index:t,headerBGC:n,rowNum:r}=this.mergedConfig;t&&(e=e.map((e,t)=>{e=[...e];const r=`<span class="index" style="background-color: ${n};">${t+1}</span>`;return e.unshift(r),e})),e=e.map((e,t)=>({ceils:e,rowIndex:t}));const i=e.length;i>r&&i<2*r&&(e=[...e,...e]),e=e.map((e,t)=>({...e,scroll:t})),this.rowsData=e,this.rows=e},calcWidths(){const{width:e,mergedConfig:t,rowsData:n}=this,{columnWidth:r,header:i}=t,o=r.reduce((e,t)=>e+t,0);let a=0;n[0]?a=n[0].ceils.length:i.length&&(a=i.length);const s=(e-o)/(a-r.length),l=new Array(a).fill(s);this.widths=D(l,r)},calcHeights(e=!1){const{height:t,mergedConfig:n,header:r}=this,{headerHeight:i,rowNum:o,data:a}=n;let s=t;r.length&&(s-=i);const l=s/o;this.avgHeight=l,e||(this.heights=new Array(a.length).fill(l))},calcAligns(){const{header:e,mergedConfig:t}=this,n=e.length;let r=new Array(n).fill("left");const{align:i}=t;this.aligns=D(r,i)},async animation(e=!1){const{needCalc:t,calcHeights:n,calcRowsData:r}=this;t&&(r(),n(),this.needCalc=!1);let{avgHeight:i,animationIndex:o,mergedConfig:a,rowsData:s,animation:l,updater:d}=this;const{waitTime:c,carousel:u,rowNum:h}=a,f=s.length;if(h>=f)return;if(e&&(await new Promise(e=>setTimeout(e,c)),d!==this.updater))return;const p="single"===u?1:h;let g=s.slice(o);if(g.push(...s.slice(0,o)),this.rows=g.slice(0,"page"===u?2*h:h+1),this.heights=new Array(f).fill(i),await new Promise(e=>setTimeout(e,300)),d!==this.updater)return;this.heights.splice(0,p,...new Array(p).fill(0)),o+=p;const v=o-f;v>=0&&(o=v),this.animationIndex=o,this.animationHandler=setTimeout(l,c-300)},stopAnimation(){const{animationHandler:e,updater:t}=this;this.updater=(t+1)%999999,e&&clearTimeout(e)},emitEvent(e,t,n,r,i){const{ceils:o,rowIndex:a}=r;this.$emit(e,{row:o,ceil:i,rowIndex:a,columnIndex:n})},updateRows(e,t){const{mergedConfig:n,animationHandler:r,animation:i}=this;this.mergedConfig={...n,data:[...e]},this.needCalc=!0,"number"==typeof t&&(this.animationIndex=t),r||i(!0)}},destroyed(){const{stopAnimation:e}=this;e()}};var vr=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-scroll-board"},[e.header.length&&e.mergedConfig?n("div",{staticClass:"header",style:"background-color: "+e.mergedConfig.headerBGC+";"},e._l(e.header,(function(t,r){return n("div",{key:""+t+r,staticClass:"header-item",style:"\n        height: "+e.mergedConfig.headerHeight+"px;\n        line-height: "+e.mergedConfig.headerHeight+"px;\n        width: "+e.widths[r]+"px;\n      ",attrs:{align:e.aligns[r]},domProps:{innerHTML:e._s(t)}})})),0):e._e(),e._v(" "),e.mergedConfig?n("div",{staticClass:"rows",style:"height: "+(e.height-(e.header.length?e.mergedConfig.headerHeight:0))+"px;"},e._l(e.rows,(function(t,r){return n("div",{key:""+t.toString()+t.scroll,staticClass:"row-item",style:"\n        height: "+e.heights[r]+"px;\n        line-height: "+e.heights[r]+"px;\n        background-color: "+e.mergedConfig[t.rowIndex%2==0?"evenRowBGC":"oddRowBGC"]+";\n      "},e._l(t.ceils,(function(i,o){return n("div",{key:""+i+r+o,staticClass:"ceil",style:"width: "+e.widths[o]+"px;",attrs:{align:e.aligns[o]},domProps:{innerHTML:e._s(i)},on:{click:function(n){return e.emitEvent("click",r,o,t,i)},mouseenter:function(n){return e.handleHover(!0,r,o,t,i)},mouseleave:function(t){return e.handleHover(!1)}}})})),0)})),0):e._e()])};vr._withStripped=!0;const mr=a({render:vr,staticRenderFns:[]},(function(e){e&&e("data-v-26e19f4c_0",{source:".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,WAAW;AACb;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;AACtB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,eAAe;EACf,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB",file:"main.vue",sourcesContent:[".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n"]},media:void 0})}),gr,void 0,!1,void 0,!1,l,void 0,void 0);function Ar(e){e.component(mr.name,mr)}const Cr={name:"DvScrollRankingBoard",mixins:[i],props:{config:{type:Object,default:()=>({})}},data:()=>({ref:"scroll-ranking-board",defaultConfig:{data:[],rowNum:5,waitTime:2e3,carousel:"single",unit:"",sort:!0,valueFormatter:null},mergedConfig:null,rowsData:[],rows:[],heights:[],animationIndex:0,animationHandler:"",updater:0}),watch:{config(){const{stopAnimation:e,calcData:t}=this;e(),t()}},methods:{afterAutoResizeMixinInit(){const{calcData:e}=this;e()},onResize(){const{mergedConfig:e,calcHeights:t}=this;e&&t(!0)},calcData(){const{mergeConfig:e,calcRowsData:t}=this;e(),t();const{calcHeights:n}=this;n();const{animation:r}=this;r(!0)},mergeConfig(){let{config:e,defaultConfig:t}=this;this.mergedConfig=D(j(t,!0),e||{})},calcRowsData(){let{data:e,rowNum:t,sort:n}=this.mergedConfig;n&&e.sort(({value:e},{value:t})=>e>t?-1:e<t?1:e===t?0:void 0);const r=e.map(({value:e})=>e),i=Math.min(...r)||0,o=Math.abs(i),a=(Math.max(...r)||0)+o;e=e.map((e,t)=>({...e,ranking:t+1,percent:(e.value+o)/a*100}));const s=e.length;s>t&&s<2*t&&(e=[...e,...e]),e=e.map((e,t)=>({...e,scroll:t})),this.rowsData=e,this.rows=e},calcHeights(e=!1){const{height:t,mergedConfig:n}=this,{rowNum:r,data:i}=n,o=t/r;this.avgHeight=o,e||(this.heights=new Array(i.length).fill(o))},async animation(e=!1){let{avgHeight:t,animationIndex:n,mergedConfig:r,rowsData:i,animation:o,updater:a}=this;const{waitTime:s,carousel:l,rowNum:d}=r,c=i.length;if(d>=c)return;if(e&&(await new Promise(e=>setTimeout(e,s)),a!==this.updater))return;const u="single"===l?1:d;let h=i.slice(n);if(h.push(...i.slice(0,n)),this.rows=h.slice(0,d+1),this.heights=new Array(c).fill(t),await new Promise(e=>setTimeout(e,300)),a!==this.updater)return;this.heights.splice(0,u,...new Array(u).fill(0)),n+=u;const f=n-c;f>=0&&(n=f),this.animationIndex=n,this.animationHandler=setTimeout(o,s-300)},stopAnimation(){const{animationHandler:e,updater:t}=this;this.updater=(t+1)%999999,e&&clearTimeout(e)}},destroyed(){const{stopAnimation:e}=this;e()}};var br=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:e.ref,staticClass:"dv-scroll-ranking-board"},e._l(e.rows,(function(t,r){return n("div",{key:t.toString()+t.scroll,staticClass:"row-item",style:"height: "+e.heights[r]+"px;"},[n("div",{staticClass:"ranking-info"},[n("div",{staticClass:"rank"},[e._v("No."+e._s(t.ranking))]),e._v(" "),n("div",{staticClass:"info-name",domProps:{innerHTML:e._s(t.name)}}),e._v(" "),n("div",{staticClass:"ranking-value"},[e._v(e._s(e.mergedConfig.valueFormatter?e.mergedConfig.valueFormatter(t):t.value+e.mergedConfig.unit))])]),e._v(" "),n("div",{staticClass:"ranking-column"},[n("div",{staticClass:"inside-column",style:"width: "+t.percent+"%;"},[n("div",{staticClass:"shine"})])])])})),0)};br._withStripped=!0;const yr=a({render:br,staticRenderFns:[]},(function(e){e&&e("data-v-f297519a_0",{source:".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n80% {\n    left: 0%;\n    transform: translateX(-100%);\n}\n100% {\n    left: 100%;\n    transform: translateX(0%);\n}\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,WAAW;EACX,YAAY;EACZ,WAAW;EACX,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,WAAW;EACX,eAAe;AACjB;AACA;EACE,WAAW;EACX,cAAc;AAChB;AACA;EACE,OAAO;AACT;AACA;EACE,gDAAgD;EAChD,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,QAAQ;EACR,WAAW;EACX,WAAW;EACX,4BAA4B;EAC5B,wDAAwD;EACxD,kDAAkD;AACpD;AACA;AACE;IACE,QAAQ;IACR,4BAA4B;AAC9B;AACA;IACE,UAAU;IACV,yBAAyB;AAC3B;AACF",file:"main.vue",sourcesContent:[".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n  80% {\n    left: 0%;\n    transform: translateX(-100%);\n  }\n  100% {\n    left: 100%;\n    transform: translateX(0%);\n  }\n}\n"]},media:void 0})}),Cr,void 0,!1,void 0,!1,l,void 0,void 0);function xr(e){e.component(yr.name,yr)}e.use((function(e){e.use(p),e.use(A),e.use(Y),e.use(H),e.use(q),e.use(ee),e.use(ie),e.use(le),e.use(he),e.use(ve),e.use(be),e.use(ke),e.use(Ie),e.use(Me),e.use(Ge),e.use(Ne),e.use(Qe),e.use(Ze),e.use(tt),e.use(ot),e.use(dt),e.use(ft),e.use(mt),e.use(yt),e.use(Et),e.use(St),e.use(Lt),e.use(Fn),e.use(Nn),e.use(Qn),e.use(Zn),e.use(tr),e.use(or),e.use(dr),e.use(fr),e.use(pr),e.use(Ar),e.use(xr)}))}));


================================================
FILE: lib/components/activeRingChart/index.js
================================================
import './src/main.css'
import ActiveRingChart from './src/main.vue'

export default function (Vue) {
  Vue.component(ActiveRingChart.name, ActiveRingChart)
}


================================================
FILE: lib/components/activeRingChart/src/main.css
================================================
.dv-active-ring-chart {
  position: relative;
}
.dv-active-ring-chart .active-ring-chart-container {
  width: 100%;
  height: 100%;
}
.dv-active-ring-chart .active-ring-info {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dv-active-ring-chart .active-ring-info .dv-digital-flop {
  width: 100px;
  height: 30px;
}
.dv-active-ring-chart .active-ring-info .active-ring-name {
  width: 100px;
  height: 30px;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}


================================================
FILE: lib/components/activeRingChart/src/main.vue
================================================
<template>
  <div class="dv-active-ring-chart">
    <div class="active-ring-chart-container" ref="active-ring-chart" />
    <div class="active-ring-info">
      <dv-digital-flop :config="digitalFlop" />
      <div class="active-ring-name" :style="fontSize">{{ ringName }}</div>
    </div>
  </div>
</template>

<script>
import Charts from '@jiaminghi/charts'

import dvDigitalFlop from '../../digitalFlop/src/main.vue'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvActiveRingChart',
  components: {
    dvDigitalFlop
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      defaultConfig: {
        /**
         * @description Ring radius
         * @type {String|Number}
         * @default radius = '50%'
         * @example radius = '50%' | 100
         */
        radius: '50%',
        /**
         * @description Active ring radius
         * @type {String|Number}
         * @default activeRadius = '55%'
         * @example activeRadius = '55%' | 110
         */
        activeRadius: '55%',
        /**
         * @description Ring data
         * @type {Array<Object>}
         * @default data = [{ name: '', value: 0 }]
         */
        data: [{ name: '', value: 0 }],
        /**
         * @description Ring line width
         * @type {Number}
         * @default lineWidth = 20
         */
        lineWidth: 20,
        /**
         * @description Active time gap (ms)
         * @type {Number}
         * @default activeTimeGap = 3000
         */
        activeTimeGap: 3000,
        /**
         * @description Ring color (hex|rgb|rgba|color keywords)
         * @type {Array<String>}
         * @default color = [Charts Default Color]
         * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
         */
        color: [],
        /**
         * @description Digital flop style
         * @type {Object}
         */
        digitalFlopStyle: {
          fontSize: 25,
          fill: '#fff'
        },
        /**
         * @description Digital flop toFixed
         * @type {Number}
         */
        digitalFlopToFixed: 0,
        /**
         * @description Digital flop unit
         * @type {String}
         */
        digitalFlopUnit: '',
        /**
         * @description CRender animationCurve
         * @type {String}
         * @default animationCurve = 'easeOutCubic'
         */
        animationCurve: 'easeOutCubic',
        /**
         * @description CRender animationFrame
         * @type {String}
         * @default animationFrame = 50
         */
        animationFrame: 50,
        /**
         * @description showOriginValue
         * @type {Boolean}
         * @default showOriginValue = false
         */
        showOriginValue: false
      },

      mergedConfig: null,

      chart: null,

      activeIndex: 0,

      animationHandler: ''
    }
  },
  computed: {
    digitalFlop() {
      const { mergedConfig, activeIndex } = this

      if (!mergedConfig) return {}

      const {
        digitalFlopStyle,
        digitalFlopToFixed,
        data,
        showOriginValue,
        digitalFlopUnit
      } = mergedConfig

      const value = data.map(({ value }) => value)

      let displayValue

      if (showOriginValue) {
        displayValue = value[activeIndex]
      } else {
        const sum = value.reduce((all, v) => all + v, 0)

        const percent = parseFloat((value[activeIndex] / sum) * 100) || 0

        displayValue = percent
      }

      return {
        content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
        number: [displayValue],
        style: digitalFlopStyle,
        toFixed: digitalFlopToFixed
      }
    },
    ringName() {
      const { mergedConfig, activeIndex } = this

      if (!mergedConfig) return ''

      return mergedConfig.data[activeIndex].name
    },
    fontSize() {
      const { mergedConfig } = this

      if (!mergedConfig) return ''

      return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`
    }
  },
  watch: {
    config() {
      const { animationHandler, mergeConfig, setRingOption } = this

      clearTimeout(animationHandler)

      this.activeIndex = 0

      mergeConfig()

      setRingOption()
    }
  },
  methods: {
    init() {
      const { initChart, mergeConfig, setRingOption } = this

      initChart()

      mergeConfig()

      setRingOption()
    },
    initChart() {
      const { $refs } = this

      this.chart = new Charts($refs['active-ring-chart'])
    },
    mergeConfig() {
      const { defaultConfig, config } = this

      this.mergedConfig = deepMerge(
        deepClone(defaultConfig, true),
        config || {}
      )
    },
    setRingOption() {
      const { getRingOption, chart, ringAnimation } = this

      const option = getRingOption()

      chart.setOption(option, true)

      ringAnimation()
    },
    getRingOption() {
      const { mergedConfig, getRealRadius } = this

      const radius = getRealRadius()

      mergedConfig.data.forEach(dataItem => {
        dataItem.radius = radius
      })

      return {
        series: [
          {
            type: 'pie',
            ...mergedConfig,
            outsideLabel: {
              show: false
            }
          }
        ],
        color: mergedConfig.color
      }
    },
    getRealRadius(active = false) {
      const { mergedConfig, chart } = this

      const { radius, activeRadius, lineWidth } = mergedConfig

      const maxRadius = Math.min(...chart.render.area) / 2

      const halfLineWidth = lineWidth / 2

      let realRadius = active ? activeRadius : radius

      if (typeof realRadius !== 'number')
        realRadius = (parseInt(realRadius) / 100) * maxRadius

      const insideRadius = realRadius - halfLineWidth
      const outSideRadius = realRadius + halfLineWidth

      return [insideRadius, outSideRadius]
    },
    ringAnimation() {
      let { activeIndex, getRingOption, chart, getRealRadius } = this

      const radius = getRealRadius()
      const active = getRealRadius(true)

      const option = getRingOption()

      const { data } = option.series[0]

      data.forEach((dataItem, i) => {
        if (i === activeIndex) {
          dataItem.radius = active
        } else {
          dataItem.radius = radius
        }
      })

      chart.setOption(option, true)

      const { activeTimeGap } = option.series[0]

      this.animationHandler = setTimeout(foo => {
        activeIndex += 1

        if (activeIndex >= data.length) activeIndex = 0

        this.activeIndex = activeIndex

        this.ringAnimation()
      }, activeTimeGap)
    }
  },
  mounted() {
    const { init } = this

    init()
  },
  beforeDestroy() {
    const { animationHandler } = this

    clearTimeout(animationHandler)
  }
}
</script>

================================================
FILE: lib/components/borderBox1/index.js
================================================
import './src/main.css'
import BorderBox1 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox1.name, BorderBox1)
}


================================================
FILE: lib/components/borderBox1/src/main.css
================================================
.dv-border-box-1 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-box-1 .border {
  position: absolute;
  display: block;
}
.dv-border-box-1 .right-top {
  right: 0px;
  transform: rotateY(180deg);
}
.dv-border-box-1 .left-bottom {
  bottom: 0px;
  transform: rotateX(180deg);
}
.dv-border-box-1 .right-bottom {
  right: 0px;
  bottom: 0px;
  transform: rotateX(180deg) rotateY(180deg);
}
.dv-border-box-1 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/borderBox1/src/main.vue
================================================
<template>
  <div class="dv-border-box-1" :ref="ref">
    <svg class="border" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
      38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
      85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
      ${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
      ${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
      ${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
      ${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
      ${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
    </svg>

    <svg
      width="150px"
      height="150px"
      :key="item"
      v-for="item in border"
      :class="`${item} border`"
    >
      <polygon
        :fill="mergedColor[0]"
        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
      >
        <animate
          attributeName="fill"
          :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
          dur="0.5s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>
      <polygon
        :fill="mergedColor[1]"
        points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
      >
        <animate
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
          dur="0.5s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>
      <polygon
        :fill="mergedColor[0]"
        points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
      >
        <animate
          attributeName="fill"
          :values="`${mergedColor[0]};${mergedColor[1]};transparent`"
          dur="1s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox1',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-1',

      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],

      defaultColor: ['#4fd2dd', '#235fa7'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/borderBox10/index.js
================================================
import './src/main.css'
import BorderBox10 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox10.name, BorderBox10)
}


================================================
FILE: lib/components/borderBox10/src/main.css
================================================
.dv-border-box-10 {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.dv-border-box-10 .dv-border-svg-container {
  position: absolute;
  display: block;
}
.dv-border-box-10 .right-top {
  right: 0px;
  transform: rotateY(180deg);
}
.dv-border-box-10 .left-bottom {
  bottom: 0px;
  transform: rotateX(180deg);
}
.dv-border-box-10 .right-bottom {
  right: 0px;
  bottom: 0px;
  transform: rotateX(180deg) rotateY(180deg);
}
.dv-border-box-10 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/borderBox10/src/main.vue
================================================
<template>
  <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
        4, ${height} 0, ${height - 4} 0, 4
      `" />
    </svg>

    <svg
      width="150px"
      height="150px"
      :key="item"
      v-for="item in border"
      :class="`${item} dv-border-svg-container`"
    >
      <polygon
        :fill="mergedColor[1]"
        points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
      />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox10',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-10',

      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],

      defaultColor: ['#1d48c4', '#d3e1f8'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/borderBox11/index.js
================================================
import './src/main.css'
import BorderBox11 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox11.name, BorderBox11)
}


================================================
FILE: lib/components/borderBox11/src/main.css
================================================
.dv-border-box-11 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-box-11 .dv-border-svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.dv-border-box-11 .dv-border-svg-container > polyline {
  fill: none;
  stroke-width: 1;
}
.dv-border-box-11 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/borderBox11/src/main.vue
================================================
<template>
  <div class="dv-border-box-11" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <defs>
        <filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
          <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
          <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
          <feFlood :flood-color="mergedColor[1]" result="glowColor" />
          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
          <feMerge>
            <feMergeNode in="softGlowColored"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>

      <polygon :fill="backgroundColor" :points="`
        20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
        ${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
        ${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
        20, ${height - 8} 8, ${height - 25} 8, 50
      `" />

      <polyline
        :stroke="mergedColor[0]"
        :filter="`url(#${filterId})`"
        :points="`
          ${(width - titleWidth) / 2}, 30
          20, 30 7, 50 7, ${50 + (height - 167) / 2}
          13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
          7, ${140 + (height - 167) / 2} 7, ${height - 27}
          20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
          ${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
          ${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
          ${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
          ${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
          ${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
          ${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
        `"
      />

      <polygon
        :stroke="mergedColor[0]"
        fill="transparent"
        :points="`
          ${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
          ${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
        `"
      />

      <polygon
        :stroke="mergedColor[0]"
        fill="transparent"
        :points="`
          ${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
          ${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
        `"
      />

      <polygon
        :stroke="mergedColor[0]"
        :fill="fade(mergedColor[1] || defaultColor[1], 30)"
        :filter="`url(#${filterId})`"
        :points="`
          ${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
          ${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
          ${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
        `"
      />

      <polygon
        :filter="`url(#${filterId})`"
        :fill="mergedColor[0]"
        opacity="1"
        :points="`
          ${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
          ${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
        `"
      >
        <animate
          attributeName="opacity"
          values="1;0.7;1"
          dur="2s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>


      <polygon
        :filter="`url(#${filterId})`"
        :fill="mergedColor[0]"
        opacity="0.7"
        :points="`
          ${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
          ${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
        `"
      >
        <animate
          attributeName="opacity"
          values="0.7;0.4;0.7"
          dur="2s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>

      <polygon
        :filter="`url(#${filterId})`"
        :fill="mergedColor[0]"
        opacity="0.5"
        :points="`
          ${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
          ${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
        `"
      >
        <animate
          attributeName="opacity"
          values="0.5;0.2;0.5"
          dur="2s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>

      <polygon
        :filter="`url(#${filterId})`"
        :fill="mergedColor[0]"
        opacity="1"
        :points="`
          ${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
          ${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
        `"
      >
        <animate
          attributeName="opacity"
          values="1;0.7;1"
          dur="2s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>

      <polygon
        :filter="`url(#${filterId})`"
        :fill="mergedColor[0]"
        opacity="0.7"
        :points="`
          ${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
          ${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
        `"
      >
        <animate
          attributeName="opacity"
          values="0.7;0.4;0.7"
          dur="2s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>

      <polygon
        :filter="`url(#${filterId})`"
        :fill="mergedColor[0]"
        opacity="0.5"
        :points="`
          ${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
          ${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
        `"
      >
        <animate
          attributeName="opacity"
          values="0.5;0.2;0.5"
          dur="2s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>

      <text
        class="dv-border-box-11-title"
        :x="`${width / 2}`"
        y="32"
        fill="#fff"
        font-size="18"
        text-anchor="middle"
        dominant-baseline="middle"
      >
        {{ title }}
      </text>

      <polygon
        :fill="mergedColor[0]"
        :filter="`url(#${filterId})`"
        :points="`
          7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
          11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
        `"
      />

      <polygon
        :fill="mergedColor[0]"
        :filter="`url(#${filterId})`"
        :points="`
          ${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
          ${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
        `"
      />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import { fade } from '@jiaminghi/color'

export default {
  name: 'DvBorderBox11',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    titleWidth: {
      type: Number,
      default: 250
    },
    title: {
      type: String,
      default: ''
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'border-box-11',
      filterId: `border-box-11-filterId-${id}`,

      defaultColor: ['#8aaafb', '#1f33a2'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    },
    fade
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/borderBox12/index.js
================================================
import './src/main.css'
import BorderBox12 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox12.name, BorderBox12)
}


================================================
FILE: lib/components/borderBox12/src/main.css
================================================
.dv-border-box-12 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-box-12 .dv-border-svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.dv-border-box-12 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/borderBox12/src/main.vue
================================================
<template>
  <div class="dv-border-box-12" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <defs>
        <filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
          <feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken" />
          <feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
          <feFlood :flood-color="fade(mergedColor[1] || defaultColor[1], 70)" result="glowColor">
            <animate
              attributeName="flood-color"
              :values="`
                ${fade(mergedColor[1] || defaultColor[1], 70)};
                ${fade(mergedColor[1] || defaultColor[1], 30)};
                ${fade(mergedColor[1] || defaultColor[1], 70)};
              `"
              dur="3s"
              begin="0s"
              repeatCount="indefinite"
            />
          </feFlood>
          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
          <feMerge>
            <feMergeNode in="softGlowColored"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>

      <path
        v-if="width && height"
        :fill="backgroundColor"
        stroke-width="2"
        :stroke="mergedColor[0]"
        :d="`
          M15 5 L ${width - 15} 5 Q ${width - 5} 5, ${width - 5} 15
          L ${width - 5} ${height - 15} Q ${width - 5} ${height - 5}, ${width - 15} ${height - 5}
          L 15, ${height - 5} Q 5 ${height - 5} 5 ${height - 15} L 5 15
          Q 5 5 15 5
        `"
      />

      <path
        stroke-width="2"
        fill="transparent"
        stroke-linecap="round"
        :filter="`url(#${filterId})`"
        :stroke="mergedColor[1]"
        :d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`"
      />

      <path
        stroke-width="2"
        fill="transparent"
        stroke-linecap="round"
        :filter="`url(#${filterId})`"
        :stroke="mergedColor[1]"
        :d="`M ${width - 20} 5 L ${width - 15} 5 Q ${width - 5} 5 ${width - 5} 15 L ${width - 5} 20`"
      />

      <path
        stroke-width="2"
        fill="transparent"
        stroke-linecap="round"
        :filter="`url(#${filterId})`"
        :stroke="mergedColor[1]"
        :d="`
          M ${width - 20} ${height - 5} L ${width - 15} ${height - 5}
          Q ${width - 5} ${height - 5} ${width - 5} ${height - 15}
          L ${width - 5} ${height - 20}
        `"
      />

      <path
        stroke-width="2"
        fill="transparent"
        stroke-linecap="round"
        :filter="`url(#${filterId})`"
        :stroke="mergedColor[1]"
        :d="`
          M 20 ${height - 5} L 15 ${height - 5}
          Q 5 ${height - 5} 5 ${height - 15}
          L 5 ${height - 20}
        `"
      />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import { fade } from '@jiaminghi/color'

export default {
  name: 'DvBorderBox12',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'border-box-12',
      filterId: `borderr-box-12-filterId-${id}`,

      defaultColor: ['#2e6099', '#7ce7fd'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    },
    fade
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/borderBox13/index.js
================================================
import './src/main.css'
import BorderBox13 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox13.name, BorderBox13)
}


================================================
FILE: lib/components/borderBox13/src/main.css
================================================
.dv-border-box-13 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-box-13 .dv-border-svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.dv-border-box-13 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/borderBox13/src/main.vue
================================================
<template>
  <div class="dv-border-box-13" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <path
        :fill="backgroundColor"
        :stroke="mergedColor[0]"
        :d="`
          M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
          L ${width - 20} 10 L ${width - 5} 25
          L ${width - 5} ${height - 5} L 20 ${height - 5}
          L 5 ${height - 20} L 5 20
        `"
      />

      <path
        fill="transparent"
        stroke-width="3"
        stroke-linecap="round"
        stroke-dasharray="10, 5"
        :stroke="mergedColor[0]"
        :d="`M 16 9 L 61 9`"
      />

      <path
        fill="transparent"
        :stroke="mergedColor[1]"
        :d="`M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`"
      />

      <path
        fill="transparent"
        :stroke="mergedColor[1]"
        :d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`"
      />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox13',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-13',

      defaultColor: ['#6586ec', '#2cf7fe'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/borderBox2/index.js
================================================
import './src/main.css'
import BorderBox2 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox2.name, BorderBox2)
}


================================================
FILE: lib/components/borderBox2/src/main.css
================================================
.dv-border-box-2 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-box-2 .dv-border-svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.dv-border-box-2 .dv-border-svg-container > polyline {
  fill: none;
  stroke-width: 1;
}
.dv-border-box-2 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/borderBox2/src/main.vue
================================================
<template>
  <div class="dv-border-box-2" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
      `" />

      <polyline
        :stroke="mergedColor[0]"
        :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
      />
      <polyline
        :stroke="mergedColor[1]"
        :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
      />
      <circle :fill="mergedColor[0]" cx="11" cy="11" r="1" />
      <circle :fill="mergedColor[0]" :cx="width - 11" cy="11" r="1" />
      <circle :fill="mergedColor[0]" :cx="width - 11" :cy="height - 11" r="1" />
      <circle :fill="mergedColor[0]" cx="11" :cy="height - 11" r="1" />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox2',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-2',

      defaultColor: ['#fff', 'rgba(255, 255, 255, 0.6)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/borderBox3/index.js
================================================
import './src/main.css'
import BorderBox3 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox3.name, BorderBox3)
}


================================================
FILE: lib/components/borderBox3/src/main.css
================================================
.dv-border-box-3 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-box-3 .dv-border-svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.dv-border-box-3 .dv-border-svg-container > polyline {
  fill: none;
}
.dv-border-box-3 .dv-bb3-line1 {
  stroke-width: 3;
}
.dv-border-box-3 .dv-bb3-line2 {
  stroke-width: 1;
}
.dv-border-box-3 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/borderBox3/src/main.vue
================================================
<template>
  <div class="dv-border-box-3" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
      `" />

      <polyline class="dv-bb3-line1"
        :stroke="mergedColor[0]"
        :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
      />
      <polyline class="dv-bb3-line2"
        :stroke="mergedColor[1]"
        :points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`"
      />
      <polyline class="dv-bb3-line2"
        :stroke="mergedColor[1]"
        :points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`"
      />
      <polyline class="dv-bb3-line2"
        :stroke="mergedColor[1]"
        :points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
      />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox3',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-3',

      defaultColor: ['#2862b7', '#2862b7'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/borderBox4/index.js
================================================
import './src/main.css'
import BorderBox4 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox4.name, BorderBox4)
}


================================================
FILE: lib/components/borderBox4/src/main.css
================================================
.dv-border-box-4 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-box-4 .dv-reverse {
  transform: rotate(180deg);
}
.dv-border-box-4 .dv-border-svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.dv-border-box-4 .dv-border-svg-container > polyline {
  fill: none;
}
.dv-border-box-4 .sw1 {
  stroke-width: 1;
}
.dv-border-box-4 .sw3 {
  stroke-width: 3px;
  stroke-linecap: round;
}
.dv-border-box-4 .dv-bb4-line-1 {
  stroke-width: 1;
}
.dv-border-box-4 .dv-bb4-line-2 {
  stroke-width: 1;
}
.dv-border-box-4 .dv-bb4-line-3 {
  stroke-width: 3px;
  stroke-linecap: round;
}
.dv-border-box-4 .dv-bb4-line-4 {
  stroke-width: 3px;
  stroke-linecap: round;
}
.dv-border-box-4 .dv-bb4-line-5 {
  stroke-width: 1;
}
.dv-border-box-4 .dv-bb4-line-6 {
  stroke-width: 1;
}
.dv-border-box-4 .dv-bb4-line-7 {
  stroke-width: 1;
}
.dv-border-box-4 .dv-bb4-line-8 {
  stroke-width: 3px;
  stroke-linecap: round;
}
.dv-border-box-4 .dv-bb4-line-9 {
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 100 250;
}
.dv-border-box-4 .dv-bb4-line-10 {
  stroke-width: 1;
  stroke-dasharray: 80 270;
}
.dv-border-box-4 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/borderBox4/src/main.vue
================================================
<template>
  <div class="dv-border-box-4" :ref="ref">
    <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        ${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
        16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
      `" />

      <polyline class="dv-bb4-line-1"
        :stroke="mergedColor[0]"
        :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
          10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"
      />
      <polyline
        :stroke="mergedColor[1]"
        class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
          14, ${height - 100}`"
      />

      <polyline class="dv-bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
      <polyline class="dv-bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
      <polyline class="dv-bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
      <polyline class="dv-bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
      <polyline class="dv-bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
      <polyline class="dv-bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
      <polyline class="dv-bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
      <polyline class="dv-bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox4',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    reverse: {
      type: Boolean,
      default: false
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-4',

      defaultColor: ['red', 'rgba(0,0,255,0.8)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/borderBox5/index.js
================================================
import './src/main.css'
import BorderBox5 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox5.name, BorderBox5)
}


================================================
FILE: lib/components/borderBox5/src/main.css
================================================
.dv-border-box-5 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-box-5 .dv-reverse {
  transform: rotate(180deg);
}
.dv-border-box-5 .dv-border-svg-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.dv-border-box-5 .dv-border-svg-container > polyline {
  fill: none;
}
.dv-border-box-5 .dv-bb5-line-1,
.dv-border-box-5 .dv-bb5-line-2 {
  stroke-width: 1;
}
.dv-border-box-5 .dv-bb5-line-3,
.dv-border-box-5 .dv-bb5-line-6 {
  stroke-width: 5;
}
.dv-border-box-5 .dv-bb5-line-4,
.dv-border-box-5 .dv-bb5-line-5 {
  stroke-width: 2;
}
.dv-border-box-5 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/borderBox5/src/main.vue
================================================
<template>
  <div class="dv-border-box-5" :ref="ref">
    <svg :class="`dv-border-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
      `" />

      <polyline
        class="dv-bb5-line-1"
        :stroke="mergedColor[0]"
        :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
          ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
      />
      <polyline
        class="dv-bb5-line-2"
        :stroke="mergedColor[1]"
        :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
          ${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
      />
      <polyline class="dv-bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
      <polyline class="dv-bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
      <polyline class="dv-bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
      <polyline class="dv-bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox5',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    reverse: {
      type: Boolean,
      default: false
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-5',

      defaultColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/borderBox6/index.js
================================================
import './src/main.css'
import BorderBox6 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox6.name, BorderBox6)
}


================================================
FILE: lib/components/borderBox6/src/main.css
================================================
.dv-border-box-6 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-box-6 .dv-border-svg-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.dv-border-box-6 .dv-border-svg-container > polyline {
  fill: none;
  stroke-width: 1;
}
.dv-border-box-6 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/borderBox6/src/main.vue
================================================
<template>
  <div class="dv-border-box-6" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
      `" />

      <circle :fill="mergedColor[1]" cx="5" cy="5" r="2"/>
      <circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
      <circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
      <circle :fill="mergedColor[1]" cx="5" :cy="height - 5" r="2" />
      <polyline :stroke="mergedColor[0]" :points="`10, 4 ${width - 10}, 4`" />
      <polyline :stroke="mergedColor[0]" :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
      <polyline :stroke="mergedColor[0]" :points="`5, 70 5, ${height - 70}`" />
      <polyline :stroke="mergedColor[0]" :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
      <polyline :stroke="mergedColor[0]" :points="`3, 10, 3, 50`" />
      <polyline :stroke="mergedColor[0]" :points="`7, 30 7, 80`" />
      <polyline :stroke="mergedColor[0]" :points="`${width - 3}, 10 ${width - 3}, 50`" />
      <polyline :stroke="mergedColor[0]" :points="`${width - 7}, 30 ${width - 7}, 80`" />
      <polyline :stroke="mergedColor[0]" :points="`3, ${height - 10} 3, ${height - 50}`" />
      <polyline :stroke="mergedColor[0]" :points="`7, ${height - 30} 7, ${height - 80}`" />
      <polyline :stroke="mergedColor[0]" :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
      <polyline :stroke="mergedColor[0]" :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize.js'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox6',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-6',

      defaultColor: ['rgba(255, 255, 255, 0.35)', 'gray'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/borderBox7/index.js
================================================
import './src/main.css'
import BorderBox7 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox7.name, BorderBox7)
}


================================================
FILE: lib/components/borderBox7/src/main.css
================================================
.dv-border-box-7 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-box-7 .dv-border-svg-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.dv-border-box-7 .dv-border-svg-container > polyline {
  fill: none;
  stroke-linecap: round;
}
.dv-border-box-7 .dv-bb7-line-width-2 {
  stroke-width: 2;
}
.dv-border-box-7 .dv-bb7-line-width-5 {
  stroke-width: 5;
}
.dv-border-box-7 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/borderBox7/src/main.vue
================================================

<template>
  <div
    class="dv-border-box-7"
    :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
    :ref="ref"
  >
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />

      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, 10 0, 0 10, 0`" />
      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox7',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-7',

      defaultColor: ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/borderBox8/index.js
================================================
import './src/main.css'
import BorderBox8 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox8.name, BorderBox8)
}


================================================
FILE: lib/components/borderBox8/src/main.css
================================================
.dv-border-box-8 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-box-8 .dv-border-svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}
.dv-border-box-8 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/borderBox8/src/main.vue
================================================
<template>
  <div class="dv-border-box-8" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <defs>
        <path
          :id="path"
          :d="pathD"
          fill="transparent"
        />
        <radialGradient
          :id="gradient"
          cx="50%" cy="50%" r="50%"
        >
          <stop
            offset="0%" stop-color="#fff"
            stop-opacity="1"
          />
          <stop
            offset="100%" stop-color="#fff"
            stop-opacity="0"
          />
        </radialGradient>

        <mask :id="mask">
          <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
            <animateMotion
              :dur="`${dur}s`"
              :path="pathD"
              rotate="auto"
              repeatCount="indefinite"
            />
          </circle>
        </mask>
      </defs>

      <polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />

      <use
        :stroke="mergedColor[0]"
        stroke-width="1"
        :xlink:href="`#${path}`"
      />

      <use
        :stroke="mergedColor[1]"
        stroke-width="3"
        :xlink:href="`#${path}`"
        :mask="`url(#${mask})`"
      >
        <animate
          attributeName="stroke-dasharray"
          :from="`0, ${length}`"
          :to="`${length}, 0`"
          :dur="`${dur}s`"
          repeatCount="indefinite"
        />
      </use>
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox8',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    dur: {
      type: Number,
      default: 3
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    },
    reverse: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'border-box-8',
      path: `border-box-8-path-${id}`,
      gradient: `border-box-8-gradient-${id}`,
      mask: `border-box-8-mask-${id}`,

      defaultColor: ['#235fa7', '#4fd2dd'],

      mergedColor: []
    }
  },
  computed: {
    length () {
      const { width, height } = this

      return (width + height - 5) * 2
    },
    pathD () {
      const { reverse, width, height } = this

      if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`

      return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/borderBox9/index.js
================================================
import './src/main.css'
import BorderBox9 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox9.name, BorderBox9)
}


================================================
FILE: lib/components/borderBox9/src/main.css
================================================
.dv-border-box-9 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-box-9 .dv-border-svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}
.dv-border-box-9 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/borderBox9/src/main.vue
================================================
<template>
  <div class="dv-border-box-9" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <defs>
        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
          <animate
            attributeName="x1"
            values="0%;100%;0%"
            dur="10s"
            begin="0s"
            repeatCount="indefinite"
          />

          <animate
            attributeName="x2"
            values="100%;0%;100%"
            dur="10s"
            begin="0s"
            repeatCount="indefinite"
          />

          <stop offset="0%" :stop-color="mergedColor[0]">
            <animate
              attributeName="stop-color"
              :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
              dur="10s"
              begin="0s"
              repeatCount="indefinite"
            />
          </stop>
          <stop offset="100%" :stop-color="mergedColor[1]">
            <animate
              attributeName="stop-color"
              :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
              dur="10s"
              begin="0s"
              repeatCount="indefinite"
            />
          </stop>
        </linearGradient>

        <mask :id="maskId">
          <polyline
            stroke="#fff"
            stroke-width="3"
            fill="transparent"
            :points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`"
          />
          <polyline
            fill="#fff"
            :points="
              `8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3
              ${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}
            `"
          />

          <polyline
            stroke="#fff"
            stroke-width="3"
            fill="transparent"
            :points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`"
          />
          <polyline
            fill="#fff"
            :points="`
              ${width * 0.52}, 3 ${width * 0.58}, 3
              ${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9
            `"
          />
          <polyline
            fill="#fff"
            :points="`
              ${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1}
              ${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9
            `"
          />

          <polyline
            stroke="#fff"
            stroke-width="3"
            fill="transparent"
            :points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`"
          />
          <polyline
            fill="#fff"
            :points="`
              8, ${height * 0.55} 8, ${height * 0.7}
              2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}
            `"
          />

          <polyline
            stroke="#fff"
            stroke-width="3"
            fill="transparent"
            :points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.35}`"
          />
          <polyline
            fill="#fff"
            :points="`
              ${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.8}
              ${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${width * 0.92 + 7}, ${height - 9}
            `"
          />
        </mask>
      </defs>

      <polygon :fill="backgroundColor" :points="`
        15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
        ${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
        ${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
        ${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
        ${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10}  ${width * 0.92 + 2}, ${height - 6}
        11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
      `" />

      <rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox9',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'border-box-9',

      gradientId: `border-box-9-gradient-${id}`,
      maskId: `border-box-9-mask-${id}`,

      defaultColor: ['#11eefd', '#0078d2'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/capsuleChart/index.js
================================================
import './src/main.css'
import CapsuleChart from './src/main.vue'

export default function (Vue) {
  Vue.component(CapsuleChart.name, CapsuleChart)
}


================================================
FILE: lib/components/capsuleChart/src/main.css
================================================
.dv-capsule-chart {
  position: relative;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 10px;
  color: #fff;
}
.dv-capsule-chart .label-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding-right: 10px;
  text-align: right;
  font-size: 12px;
}
.dv-capsule-chart .label-column div {
  height: 20px;
  line-height: 20px;
}
.dv-capsule-chart .capsule-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dv-capsule-chart .capsule-item {
  box-shadow: 0 0 3px #999;
  height: 10px;
  margin: 5px 0px;
  border-radius: 5px;
}
.dv-capsule-chart .capsule-item .capsule-item-column {
  position: relative;
  height: 8px;
  margin-top: 1px;
  border-radius: 5px;
  transition: all 0.3s;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {
  font-size: 12px;
  transform: translateX(100%);
}
.dv-capsule-chart .unit-label {
  height: 20px;
  font-size: 12px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dv-capsule-chart .unit-text {
  text-align: right;
  display: flex;
  align-items: flex-end;
  font-size: 12px;
  line-height: 20px;
  margin-left: 10px;
}


================================================
FILE: lib/components/capsuleChart/src/main.vue
================================================
<template>
  <div class="dv-capsule-chart">
    <template v-if="mergedConfig">
      <div class="label-column">
        <div v-for="item in mergedConfig.data" :key="item.name">{{ item.name }}</div>
        <div>&nbsp;</div>
      </div>

      <div class="capsule-container">
        <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
          <div
            class="capsule-item-column"
            :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
          >
            <div
              v-if="mergedConfig.showValue"
              class="capsule-item-value"
            >{{ capsuleValue[index] }}</div>
          </div>
        </div>

        <div class="unit-label">
          <div
            v-for="(label, index) in labelData"
            :key="label + index"
          >{{ label }}</div>
        </div>
      </div>

      <div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
    </template>
  </div>
</template>

<script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvCapsuleChart',
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      defaultConfig: {
        /**
         * @description Capsule chart data
         * @type {Array<Object>}
         * @default data = []
         * @example data = [{ name: 'foo1', value: 100 }, { name: 'foo2', value: 100 }]
         */
        data: [],
        /**
         * @description Colors (hex|rgb|rgba|color keywords)
         * @type {Array<String>}
         * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
         * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
         */
        colors: [
          '#37a2da',
          '#32c5e9',
          '#67e0e3',
          '#9fe6b8',
          '#ffdb5c',
          '#ff9f7f',
          '#fb7293'
        ],
        /**
         * @description Chart unit
         * @type {String}
         * @default unit = ''
         */
        unit: '',
        /**
         * @description Show item value
         * @type {Boolean}
         * @default showValue = false
         */
        showValue: false
      },

      mergedConfig: null,

      capsuleLength: [],
      capsuleValue: [],
      labelData: [],
      labelDataLength: []
    }
  },
  watch: {
    config() {
      const { calcData } = this

      calcData()
    }
  },
  methods: {
    calcData() {
      const { mergeConfig, calcCapsuleLengthAndLabelData } = this

      mergeConfig()

      calcCapsuleLengthAndLabelData()
    },
    mergeConfig() {
      let { config, defaultConfig } = this

      this.mergedConfig = deepMerge(
        deepClone(defaultConfig, true),
        config || {}
      )
    },
    calcCapsuleLengthAndLabelData() {
      const { data } = this.mergedConfig

      if (!data.length) return

      const capsuleValue = data.map(({ value }) => value)

      const maxValue = Math.max(...capsuleValue)

      this.capsuleValue = capsuleValue

      this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))

      const oneFifth = maxValue / 5

      const labelData = Array.from(
        new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
      )

      this.labelData = labelData

      this.labelDataLength = Array.from(labelData).map(v =>
        maxValue ? v / maxValue : 0
      )
    }
  },
  mounted() {
    const { calcData } = this

    calcData()
  }
}
</script>

================================================
FILE: lib/components/charts/index.js
================================================
import './src/main.css'
import Charts from './src/main.vue'

export default function (Vue) {
  Vue.component(Charts.name, Charts)
}


================================================
FILE: lib/components/charts/src/main.css
================================================
.dv-charts-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-charts-container .charts-canvas-container {
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/charts/src/main.vue
================================================
<template>
  <div class="dv-charts-container" :ref="ref">
    <div class="charts-canvas-container" :ref="chartRef" />
  </div>
</template>

<script>
import { uuid } from '../../../util/index'

import autoResize from '../../../mixin/autoResize'

import Charts from '@jiaminghi/charts'

export default {
  name: 'DvCharts',
  mixins: [autoResize],
  props: {
    option: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    const id = uuid()
    return {
      ref: `charts-container-${id}`,
      chartRef: `chart-${id}`,

      chart: null
    }
  },
  watch: {
    option () {
      let { chart, option } = this

      if (!chart) return

      if (!option) option = {}

      chart.setOption(option, true)
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { initChart } = this

      initChart()
    },
    initChart () {
      const { $refs, chartRef, option } = this

      const chart = this.chart = new Charts($refs[chartRef])

      if (!option) return

      chart.setOption(option)
    },
    onResize () {
      const { chart } = this

      if (!chart) return

      chart.resize()
    }
  }
}
</script>

================================================
FILE: lib/components/conicalColumnChart/index.js
================================================
import './src/main.css'
import ConicalColumnChart from './src/main.vue'

export default function (Vue) {
  Vue.component(ConicalColumnChart.name, ConicalColumnChart)
}


================================================
FILE: lib/components/conicalColumnChart/src/main.css
================================================
.dv-conical-column-chart {
  width: 100%;
  height: 100%;
}
.dv-conical-column-chart text {
  text-anchor: middle;
}


================================================
FILE: lib/components/conicalColumnChart/src/main.vue
================================================
<template>
  <div class="dv-conical-column-chart" :ref="ref">
    <svg :width="width" :height="height">
      <g
        v-for="(item, i) in column"
        :key="i"
      >
        <path
          :d="item.d"
          :fill="mergedConfig.columnColor"
        />
        <text
          :style="`fontSize:${mergedConfig.fontSize}px`"
          :fill="mergedConfig.textColor"
          :x="item.x"
          :y="height - 4"
        >
          {{ item.name }}
        </text>
        <image
          v-if="mergedConfig.img.length"
          :xlink:href="mergedConfig.img[i % mergedConfig.img.length]"
          :width="mergedConfig.imgSideLength"
          :height="mergedConfig.imgSideLength"
          :x="item.x - mergedConfig.imgSideLength / 2"
          :y="item.y - mergedConfig.imgSideLength"
        />
        <text
          v-if="mergedConfig.showValue"
          :style="`fontSize:${mergedConfig.fontSize}px`"
          :fill="mergedConfig.textColor"
          :x="item.x"
          :y="item.textY"
        >
          {{ item.value }}
        </text>
      </g>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvConicalColumnChart',
  mixins: [autoResize],
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      ref: 'conical-column-chart',

      defaultConfig: {
        /**
         * @description Chart data
         * @type {Array<Object>}
         * @default data = []
         */
        data: [],
        /**
         * @description Chart img
         * @type {Array<String>}
         * @default img = []
         */
        img: [],
        /**
         * @description Chart font size
         * @type {Number}
         * @default fontSize = 12
         */
        fontSize: 12,
        /**
         * @description Img side length
         * @type {Number}
         * @default imgSideLength = 30
         */
        imgSideLength: 30,
        /**
         * @description Column color
         * @type {String}
         * @default columnColor = 'rgba(0, 194, 255, 0.4)'
         */
        columnColor: 'rgba(0, 194, 255, 0.4)',
        /**
         * @description Text color
         * @type {String}
         * @default textColor = '#fff'
         */
        textColor: '#fff',
        /**
         * @description Show value
         * @type {Boolean}
         * @default showValue = false
         */
        showValue: false
      },

      mergedConfig: null,

      column: []
    }
  },
  watch: {
    config () {
      const { calcData } = this

      calcData()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcData } = this

      calcData()
    },
    onResize () {
      const { calcData } = this

      calcData()
    },
    calcData () {
      const { mergeConfig, initData, calcSVGPath } = this

      mergeConfig()

      initData()

      calcSVGPath()
    },
    mergeConfig () {
      const { defaultConfig, config } = this

      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
    },
    initData () {
      const { mergedConfig } = this
      let { data } = mergedConfig

      data = deepClone(data, true)

      data.sort(({ value: a }, { value: b }) => {
        if (a > b) return -1
        if (a < b) return 1
        if (a === b) return 0
      })

      const max = data[0] ? data[0].value : 10

      data = data.map(item => ({
        ...item,
        percent: item.value / max
      }))

      mergedConfig.data = data
    },
    calcSVGPath () {
      const { mergedConfig, width, height } = this

      const { imgSideLength, fontSize, data } = mergedConfig

      const itemNum = data.length
      const gap = width / (itemNum + 1)

      const useAbleHeight = height - imgSideLength - fontSize - 5
      const svgBottom = height - fontSize - 5

      this.column = data.map((item, i) => {
        const { percent } = item

        const middleXPos = gap * (i + 1)
        const leftXPos = gap * i
        const rightXpos = gap * (i + 2)

        const middleYPos = svgBottom - useAbleHeight * percent
        const controlYPos = useAbleHeight * percent * 0.6 + middleYPos

        const d = `
          M${leftXPos}, ${svgBottom}
          Q${middleXPos}, ${controlYPos} ${middleXPos},${middleYPos}
          M${middleXPos},${middleYPos}
          Q${middleXPos}, ${controlYPos} ${rightXpos},${svgBottom}
          L${leftXPos}, ${svgBottom}
          Z
        `

        const textY = (svgBottom + middleYPos) / 2 + fontSize / 2

        return {
          ...item,
          d,
          x: middleXPos,
          y: middleYPos,
          textY
        }
      })
    }
  }
}
</script>

================================================
FILE: lib/components/decoration1/index.js
================================================
import './src/main.css'
import Decoration1 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration1.name, Decoration1)
}


================================================
FILE: lib/components/decoration1/src/main.css
================================================
.dv-decoration-1 {
  width: 100%;
  height: 100%;
}
.dv-decoration-1 svg {
  transform-origin: left top;
}


================================================
FILE: lib/components/decoration1/src/main.vue
================================================
<template>
  <div class="dv-decoration-1" :ref="ref">
    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">

      <template
        v-for="(point, i) in points"
      >
        <rect
          v-if="Math.random() > 0.6"
          :key="i"
          :fill="mergedColor[0]"
          :x="point[0] - halfPointSideLength"
          :y="point[1] - halfPointSideLength"
          :width="pointSideLength"
          :height="pointSideLength"
        >
          <animate
            v-if="Math.random() > 0.6"
            attributeName="fill"
            :values="`${mergedColor[0]};transparent`"
            dur="1s"
            :begin="Math.random() * 2"
            repeatCount="indefinite"
          />
        </rect>
      </template>

      <rect
        v-if="rects[0]"
        :fill="mergedColor[1]"
        :x="rects[0][0] - pointSideLength"
        :y="rects[0][1] - pointSideLength"
        :width="pointSideLength * 2"
        :height="pointSideLength * 2"
      >
        <animate
          attributeName="width"
          :values="`0;${pointSideLength * 2}`"
          dur="2s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="height"
          :values="`0;${pointSideLength * 2}`"
          dur="2s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="x"
          :values="`${rects[0][0]};${rects[0][0] - pointSideLength}`"
          dur="2s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="y"
          :values="`${rects[0][1]};${rects[0][1] - pointSideLength}`"
          dur="2s"
          repeatCount="indefinite"
        />
      </rect>

      <rect
        v-if="rects[1]"
        :fill="mergedColor[1]"
        :x="rects[1][0] - 40"
        :y="rects[1][1] - pointSideLength"
        :width="40"
        :height="pointSideLength * 2"
      >
        <animate
          attributeName="width"
          values="0;40;0"
          dur="2s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="x"
          :values="`${rects[1][0]};${rects[1][0] - 40};${rects[1][0]}`"
          dur="2s"
          repeatCount="indefinite"
        />
      </rect>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration1',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    const pointSideLength = 2.5

    return {
      ref: 'decoration-1',

      svgWH: [200, 50],

      svgScale: [1, 1],

      rowNum: 4,
      rowPoints: 20,

      pointSideLength,
      halfPointSideLength: pointSideLength / 2,

      points: [],

      rects: [],

      defaultColor: ['#fff', '#0de7c2'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcSVGData } = this

      calcSVGData()
    },
    calcSVGData () {
      const { calcPointsPosition, calcRectsPosition, calcScale } = this

      calcPointsPosition()

      calcRectsPosition()

      calcScale()
    },
    calcPointsPosition () {
      const { svgWH, rowNum, rowPoints } = this

      const [w, h] = svgWH

      const horizontalGap = w / (rowPoints + 1)
      const verticalGap = h / (rowNum + 1)

      let points = new Array(rowNum).fill(0).map((foo, i) =>
        new Array(rowPoints).fill(0).map((foo, j) => [
          horizontalGap * (j + 1), verticalGap * (i + 1)
        ]))

      this.points = points.reduce((all, item) => [...all, ...item], [])
    },
    calcRectsPosition () {
      const { points, rowPoints } = this

      const rect1 = points[rowPoints * 2 - 1]
      const rect2 = points[rowPoints * 2 - 3]

      this.rects = [rect1, rect2]
    },
    calcScale () {
      const { width, height, svgWH } = this

      const [w, h] = svgWH

      this.svgScale = [width / w, height / h]
    },
    onResize () {
      const { calcSVGData } = this

      calcSVGData()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/decoration10/index.js
================================================
import './src/main.css'
import Decoration10 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration10.name, Decoration10)
}


================================================
FILE: lib/components/decoration10/src/main.css
================================================
.dv-decoration-10 {
  width: 100%;
  height: 100%;
  display: flex;
}


================================================
FILE: lib/components/decoration10/src/main.vue
================================================
<template>
  <div class="dv-decoration-10" :ref="ref">
    <svg :width="width" :height="height">
      <polyline
        :stroke="mergedColor[1]"
        stroke-width="2"
        :points="`0, ${height / 2} ${width}, ${height / 2}`"
      />

      <polyline
        :stroke="mergedColor[0]"
        stroke-width="2"
        :points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
        :stroke-dasharray="`0, ${width * 0.2}`"
        fill="freeze"
      >
        <animate
          :id="animationId2"
          attributeName="stroke-dasharray"
          :values="`0, ${width * 0.2};${width * 0.2}, 0;`"
          dur="3s"
          :begin="`${animationId1}.end`"
          fill="freeze"
        />
        <animate
          attributeName="stroke-dasharray"
          :values="`${width * 0.2}, 0;0, ${width * 0.2}`"
          dur="0.01s"
          :begin="`${animationId7}.end`"
          fill="freeze"
        />
      </polyline>

      <polyline
        :stroke="mergedColor[0]"
        stroke-width="2"
        :points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
        :stroke-dasharray="`0, ${width * 0.6}`"
      >
        <animate
          :id="animationId4"
          attributeName="stroke-dasharray"
          :values="`0, ${width * 0.6};${width * 0.6}, 0`"
          dur="3s"
          :begin="`${animationId3}.end + 1s`"
          fill="freeze"
        />
        <animate
          attributeName="stroke-dasharray"
          :values="`${width * 0.6}, 0;0, ${width * 0.6}`"
          dur="0.01s"
          :begin="`${animationId7}.end`"
          fill="freeze"
        />
      </polyline>

      <polyline
        :stroke="mergedColor[0]"
        stroke-width="2"
        :points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
        :stroke-dasharray="`0, ${width * 0.2}`"
      >
        <animate
          :id="animationId6"
          attributeName="stroke-dasharray"
          :values="`0, ${width * 0.2};${width * 0.2}, 0`"
          dur="3s"
          :begin="`${animationId5}.end + 1s`"
          fill="freeze"
        />
        <animate
          attributeName="stroke-dasharray"
          :values="`${width * 0.2}, 0;0, ${width * 0.3}`"
          dur="0.01s"
          :begin="`${animationId7}.end`"
          fill="freeze"
        />
      </polyline>

      <circle cx="2" :cy="height / 2" r="2" :fill="mergedColor[1]">
        <animate
          :id="animationId1"
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[0]}`"
          :begin="`0s;${animationId7}.end`"
          dur="0.3s"
          fill="freeze"
        />
      </circle>

      <circle :cx="width * 0.2" :cy="height / 2" r="2" :fill="mergedColor[1]">
        <animate
          :id="animationId3"
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[0]}`"
          :begin="`${animationId2}.end`"
          dur="0.3s"
          fill="freeze"
        />
        <animate
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[1]}`"
          dur="0.01s"
          :begin="`${animationId7}.end`"
          fill="freeze"
        />
      </circle>

      <circle :cx="width * 0.8" :cy="height / 2" r="2" :fill="mergedColor[1]">
        <animate
          :id="animationId5"
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[0]}`"
          :begin="`${animationId4}.end`"
          dur="0.3s"
          fill="freeze"
        />
        <animate
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[1]}`"
          dur="0.01s"
          :begin="`${animationId7}.end`"
          fill="freeze"
        />
      </circle>

      <circle :cx="width - 2" :cy="height / 2" r="2" :fill="mergedColor[1]">
        <animate
          :id="animationId7"
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[0]}`"
          :begin="`${animationId6}.end`"
          dur="0.3s"
          fill="freeze"
        />
        <animate
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[1]}`"
          dur="0.01s"
          :begin="`${animationId7}.end`"
          fill="freeze"
        />
      </circle>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration10',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'decoration-10',

      animationId1: `d10ani1${id}`,
      animationId2: `d10ani2${id}`,
      animationId3: `d10ani3${id}`,
      animationId4: `d10ani4${id}`,
      animationId5: `d10ani5${id}`,
      animationId6: `d10ani6${id}`,
      animationId7: `d10ani7${id}`,

      defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/decoration11/index.js
================================================
import './src/main.css'
import Decoration11 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration11.name, Decoration11)
}


================================================
FILE: lib/components/decoration11/src/main.css
================================================
.dv-decoration-11 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}
.dv-decoration-11 .decoration-content {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


================================================
FILE: lib/components/decoration11/src/main.vue
================================================
<template>
  <div class="dv-decoration-11" :ref="ref">
    <svg :width="width" :height="height">
      <polygon
        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
        :stroke="mergedColor[1]"
        :points="`20 10, 25 4, 55 4 60 10`"
      />

      <polygon
        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
        :stroke="mergedColor[1]"
        :points="`20 ${height - 10}, 25 ${height - 4}, 55 ${height - 4} 60 ${height - 10}`"
      />

      <polygon
        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
        :stroke="mergedColor[1]"
        :points="`${width - 20} 10, ${width - 25} 4, ${width - 55} 4 ${width - 60} 10`"
      />

      <polygon
        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
        :stroke="mergedColor[1]"
        :points="`${width - 20} ${height - 10}, ${width - 25} ${height - 4}, ${width - 55} ${height - 4} ${width - 60} ${height - 10}`"
      />

      <polygon
        :fill="fade(mergedColor[0] || defaultColor[0], 20)"
        :stroke="mergedColor[0]"
        :points="`
          20 10, 5 ${height / 2} 20 ${height - 10}
          ${width - 20} ${height - 10} ${width - 5} ${height / 2} ${width - 20} 10
        `"
      />

      <polyline
        fill="transparent"
        :stroke="fade(mergedColor[0] || defaultColor[0], 70)"
        :points="`25 18, 15 ${height / 2} 25 ${height - 18}`"
      />

      <polyline
        fill="transparent"
        :stroke="fade(mergedColor[0] || defaultColor[0], 70)"
        :points="`${width - 25} 18, ${width - 15} ${height / 2} ${width - 25} ${height - 18}`"
      />
    </svg>

    <div class="decoration-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import { fade } from '@jiaminghi/color'

export default {
  name: 'DvDecoration11',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      ref: 'decoration-11',

      defaultColor: ['#1a98fc', '#2cf7fe'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    },
    fade
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/decoration12/index.js
================================================
import './src/main.css'
import Decoration12 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration12.name, Decoration12)
}


================================================
FILE: lib/components/decoration12/src/main.css
================================================
.dv-decoration-12 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}
.dv-decoration-12 .decoration-content {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


================================================
FILE: lib/components/decoration12/src/main.vue
================================================
<template>
  <div class="dv-decoration-12" :ref="ref">
    <svg :width="width" :height="height">
      <defs>
        <g :id="gId">
          <path
            :stroke="pathColor[i]"
            :stroke-width="width / 2"
            fill="transparent"
            v-for="(d, i) in pathD"
            :key="d"
            :d="d"
          />
        </g>

        <radialGradient
          :id="gradientId"
          cx="50%" cy="50%" r="50%"
        >
          <stop offset="0%" stop-color="transparent" stop-opacity="1" />
          <stop offset="100%" :stop-color="fade(mergedColor[1] || defaultColor[1], 30)" stop-opacity="1" />
        </radialGradient>
      </defs>

      <circle
        v-for="r in circleR"
        :key="r"
        :r="r"
        :cx="x"
        :cy="y"
        :stroke="mergedColor[1]"
        :stroke-width="0.5"
        fill="transparent"
      />

      <circle
        r="1"
        :cx="x"
        :cy="y"
        stroke="transparent"
        :fill="`url(#${gradientId})`"
      >
        <animate
          attributeName="r"
          :values="`1;${width / 2}`"
          :dur="`${haloDur}s`"
          repeatCount="indefinite"
        />
        <animate
          attributeName="opacity"
          values="1;0"
          :dur="`${haloDur}s`"
          repeatCount="indefinite"
        />
      </circle>

      <circle
        r="2"
        :cx="x"
        :cy="y"
        :fill="mergedColor[1]"
      />

      <g v-if="showSplitLine">
        <polyline
          v-for="p in splitLinePoints"
          :key="p"
          :points="p"
          :stroke="mergedColor[1]"
          :stroke-width="0.5"
          opacity="0.5"
        />
      </g>

      <path
        v-for="d in arcD"
        :key="d"
        :d="d"
        :stroke="mergedColor[1]"
        stroke-width="2"
        fill="transparent"
      />

      <use :xlink:href="`#${gId}`">
        <animateTransform
          attributeName="transform"
          type="rotate"
          :values="`0, ${x} ${y};360, ${x} ${y}`"
          :dur="`${scanDur}s`"
          repeatCount="indefinite"
        />
      </use>
    </svg>

    <div class="decoration-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone, getCircleRadianPoint } from '@jiaminghi/c-render/lib/plugin/util'

import { fade } from '@jiaminghi/color'

export default {
  name: 'DvDecoration12',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    /**
     * @description Scan animation dur
     */
    scanDur: {
      type: Number,
      default: 3
    },
    /**
     * @description Halo animation dur
     */
    haloDur: {
      type: Number,
      default: 2
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'decoration-12',
      gId: `decoration-12-g-${id}`,
      gradientId: `decoration-12-gradient-${id}`,

      defaultColor: ['#2783ce', '#2cf7fe'],

      mergedColor: [],

      pathD: [],

      pathColor: [],

      circleR: [],

      splitLinePoints: [],

      arcD: [],

      segment: 30,

      sectorAngle: Math.PI / 3,

      ringNum: 3,

      ringWidth: 1,

      showSplitLine: true
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  computed: {
    x () {
      const { width } = this

      return width / 2
    },
    y () {
      const { height } = this

      return height / 2
    }
  },
  methods: {
    init () {
      const { mergeColor, calcPathD, calcPathColor, calcCircleR, calcSplitLinePoints, calcArcD } = this

      mergeColor()

      calcPathD()

      calcPathColor()

      calcCircleR()

      calcSplitLinePoints()

      calcArcD()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    },
    calcPathD () {
      const { x, y, width, segment, sectorAngle } = this

      const startAngle = -Math.PI / 2
      const angleGap = sectorAngle / segment
      const r = width / 4
      let lastEndPoints = getCircleRadianPoint(x, y, r, startAngle)

      this.pathD = new Array(segment)
        .fill('')
        .map((_, i) => {
          const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5))
          const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`
          lastEndPoints = endPoints

          return d
        })
    },
    calcPathColor () {
      const { mergedColor: [color], segment } = this

      const colorGap = 100 / (segment - 1)

      this.pathColor = new Array(segment)
        .fill(color)
        .map((_, i) => fade(color, 100 - i * colorGap))
    },
    calcCircleR () {
      const { segment, ringNum, width, ringWidth } = this

      const radiusGap = (width / 2 - ringWidth / 2) / ringNum

      this.circleR = new Array(ringNum)
        .fill(0)
        .map((_, i) => radiusGap * (i + 1))
    },
    calcSplitLinePoints () {
      const { x, y, width } = this

      const angleGap = Math.PI / 6
      const r = width / 2

      this.splitLinePoints = new Array(6)
        .fill('')
        .map((_, i) => {
          const startAngle = angleGap * (i + 1)
          const endAngle = startAngle + Math.PI
          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
          const endPoint = getCircleRadianPoint(x, y, r, endAngle)

          return `${startPoint.join(',')} ${endPoint.join(',')}`
        })
    },
    calcArcD () {
      const { x, y, width } = this

      const angleGap = Math.PI / 6
      const r = width / 2 - 1

      this.arcD = new Array(4)
        .fill('')
        .map((_, i) => {
          const startAngle = angleGap * (3 * i + 1)
          const endAngle = startAngle + angleGap
          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
          const endPoint = getCircleRadianPoint(x, y, r, endAngle)

          return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`
        })
    },
    afterAutoResizeMixinInit () {
      const { init } = this

      init()
    },
    fade
  }
}
</script>

================================================
FILE: lib/components/decoration2/index.js
================================================
import './src/main.css'
import Decoration2 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration2.name, Decoration2)
}


================================================
FILE: lib/components/decoration2/src/main.css
================================================
.dv-decoration-2 {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}


================================================
FILE: lib/components/decoration2/src/main.vue
================================================
<template>
  <div class="dv-decoration-2" :ref="ref">
    <svg :width="`${width}px`" :height="`${height}px`">
      <rect :x="x" :y="y" :width="w" :height="h" :fill="mergedColor[0]">
        <animate
          :attributeName="reverse ? 'height' : 'width'"
          from="0"
          :to="reverse ? height : width"
          :dur="`${dur}s`"
          calcMode="spline"
          keyTimes="0;1"
          keySplines=".42,0,.58,1"
          repeatCount="indefinite"
        />
      </rect>

      <rect :x="x" :y="y" width="1" height="1" :fill="mergedColor[1]">
        <animate
          :attributeName="reverse ? 'y' : 'x'"
          from="0"
          :to="reverse ? height : width"
          :dur="`${dur}s`"
          calcMode="spline"
          keyTimes="0;1"
          keySplines="0.42,0,0.58,1"
          repeatCount="indefinite"
        />
      </rect>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration2',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    reverse: {
      type: Boolean,
      default: false
    },
    dur: {
      type: Number,
      default: 6
    }
  },
  data () {
    return {
      ref: 'decoration-2',

      x: 0,
      y: 0,

      w: 0,
      h: 0,

      defaultColor: ['#3faacb', '#fff'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    },
    reverse () {
      const { calcSVGData } = this

      calcSVGData()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcSVGData } = this

      calcSVGData()
    },
    calcSVGData () {
      const { reverse, width, height } = this

      if (reverse) {
        this.w = 1
        this.h = height
        this.x = width / 2
        this.y = 0
      } else {
        this.w = width
        this.h = 1
        this.x = 0
        this.y = height / 2
      }
    },
    onResize () {
      const { calcSVGData } = this

      calcSVGData()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/decoration3/index.js
================================================
import './src/main.css'
import Decoration3 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration3.name, Decoration3)
}


================================================
FILE: lib/components/decoration3/src/main.css
================================================
.dv-decoration-3 {
  width: 100%;
  height: 100%;
}
.dv-decoration-3 svg {
  transform-origin: left top;
}


================================================
FILE: lib/components/decoration3/src/main.vue
================================================
<template>
  <div class="dv-decoration-3" :ref="ref">
    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">

      <template
        v-for="(point, i) in points"
      >
        <rect
          :key="i"
          :fill="mergedColor[0]"
          :x="point[0] - halfPointSideLength"
          :y="point[1] - halfPointSideLength"
          :width="pointSideLength"
          :height="pointSideLength"
        >
          <animate
            v-if="Math.random() > 0.6"
            attributeName="fill"
            :values="`${mergedColor.join(';')}`"
            :dur="Math.random() + 1 + 's'"
            :begin="Math.random() * 2"
            repeatCount="indefinite"
          />
        </rect>
      </template>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration3',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    const pointSideLength = 7

    return {
      ref: 'decoration-3',

      svgWH: [300, 35],

      svgScale: [1, 1],

      rowNum: 2,
      rowPoints: 25,

      pointSideLength,
      halfPointSideLength: pointSideLength / 2,

      points: [],

      defaultColor: ['#7acaec', 'transparent'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcSVGData } = this

      calcSVGData()
    },
    calcSVGData () {
      const { calcPointsPosition, calcScale } = this

      calcPointsPosition()

      calcScale()
    },
    calcPointsPosition () {
      const { svgWH, rowNum, rowPoints } = this

      const [w, h] = svgWH

      const horizontalGap = w / (rowPoints + 1)
      const verticalGap = h / (rowNum + 1)

      let points = new Array(rowNum).fill(0).map((foo, i) =>
        new Array(rowPoints).fill(0).map((foo, j) => [
          horizontalGap * (j + 1), verticalGap * (i + 1)
        ]))

      this.points = points.reduce((all, item) => [...all, ...item], [])
    },
    calcScale () {
      const { width, height, svgWH } = this

      const [w, h] = svgWH

      this.svgScale = [width / w, height / h]
    },
    onResize () {
      const { calcSVGData } = this

      calcSVGData()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/decoration4/index.js
================================================
import './src/main.css'
import Decoration4 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration4.name, Decoration4)
}


================================================
FILE: lib/components/decoration4/src/main.css
================================================
.dv-decoration-4 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-decoration-4 .container {
  display: flex;
  overflow: hidden;
  position: absolute;
  flex: 1;
}
.dv-decoration-4 .normal {
  animation: ani-height ease-in-out infinite;
  left: 50%;
  margin-left: -2px;
}
.dv-decoration-4 .reverse {
  animation: ani-width ease-in-out infinite;
  top: 50%;
  margin-top: -2px;
}
@keyframes ani-height {
  0% {
    height: 0%;
  }
  70% {
    height: 100%;
  }
  100% {
    height: 100%;
  }
}
@keyframes ani-width {
  0% {
    width: 0%;
  }
  70% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}


================================================
FILE: lib/components/decoration4/src/main.vue
================================================
<template>
  <div class="dv-decoration-4" :ref="ref">
    <div
      :class="`container ${reverse ? 'reverse' : 'normal'}`"
      :style="reverse ? `width:${width}px;height:5px;animation-duration:${dur}s` : `width:5px;height:${height}px;animation-duration:${dur}s`"
    >
      <svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
        <polyline
          :stroke="mergedColor[0]"
          :points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`"
        />
        <polyline
          class="bold-line"
          :stroke="mergedColor[1]"
          stroke-width="3"
          stroke-dasharray="20, 80"
          stroke-dashoffset="-30"
          :points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`"
        />
      </svg>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration4',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    reverse: {
      type: Boolean,
      default: false
    },
    dur: {
      type: Number,
      default: 3
    }
  },
  data () {
    return {
      ref: 'decoration-4',

      defaultColor: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.3)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/decoration5/index.js
================================================
import './src/main.css'
import Decoration5 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration5.name, Decoration5)
}


================================================
FILE: lib/components/decoration5/src/main.css
================================================
.dv-decoration-5 {
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/decoration5/src/main.vue
================================================
<template>
  <div class="dv-decoration-5" :ref="ref">
    <svg :width="width" :height="height">
      <polyline
        fill="transparent"
        :stroke="mergedColor[0]"
        stroke-width="3"
        :points="line1Points"
      >
        <animate
          attributeName="stroke-dasharray"
          attributeType="XML"
          :from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
          :to="`0, 0, ${line1Length}, 0`"
          :dur="`${dur}s`"
          begin="0s"
          calcMode="spline"
          keyTimes="0;1"
          keySplines="0.4,1,0.49,0.98"
          repeatCount="indefinite"
        />
      </polyline>
      <polyline
        fill="transparent"
        :stroke="mergedColor[1]"
        stroke-width="2"
        :points="line2Points"
      >
        <animate
          attributeName="stroke-dasharray"
          attributeType="XML"
          :from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
          :to="`0, 0, ${line2Length}, 0`"
          :dur="`${dur}s`"
          begin="0s"
          calcMode="spline"
          keyTimes="0;1"
          keySplines=".4,1,.49,.98"
          repeatCount="indefinite"
        />
      </polyline>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { getPolylineLength } from '@jiaminghi/charts/lib/util'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration5',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    dur: {
      type: Number,
      default: 1.2
    }
  },
  data () {
    return {
      ref: 'decoration-5',

      line1Points: '',
      line2Points: '',

      line1Length: 0,
      line2Length: 0,

      defaultColor: ['#3f96a5', '#3f96a5'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcSVGData } = this

      calcSVGData()
    },
    calcSVGData () {
      const { width, height } = this

      let line1Points = [
        [0, height * 0.2], [width * 0.18, height * 0.2], [width * 0.2, height * 0.4], [width * 0.25, height * 0.4],
        [width * 0.27, height * 0.6], [width * 0.72, height * 0.6], [width * 0.75, height * 0.4],
        [width * 0.8, height * 0.4], [width * 0.82, height * 0.2], [width, height * 0.2]
      ]

      let line2Points = [
        [width * 0.3, height * 0.8], [width * 0.7, height * 0.8]
      ]

      const line1Length = getPolylineLength(line1Points)
      const line2Length = getPolylineLength(line2Points)

      line1Points = line1Points.map(point => point.join(',')).join(' ')
      line2Points = line2Points.map(point => point.join(',')).join(' ')

      this.line1Points = line1Points
      this.line2Points = line2Points

      this.line1Length = line1Length
      this.line2Length = line2Length
    },
    onResize () {
      const { calcSVGData } = this

      calcSVGData()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/decoration6/index.js
================================================
import './src/main.css'
import Decoration6 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration6.name, Decoration6)
}


================================================
FILE: lib/components/decoration6/src/main.css
================================================
.dv-decoration-6 {
  width: 100%;
  height: 100%;
}
.dv-decoration-6 svg {
  transform-origin: left top;
}


================================================
FILE: lib/components/decoration6/src/main.vue
================================================
<template>
  <div class="dv-decoration-6" :ref="ref">
    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
      <template
        v-for="(point, i) in points"
      >
        <rect
          :key="i"
          :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
          :x="point[0] - halfRectWidth"
          :y="point[1] - heights[i] / 2"
          :width="rectWidth"
          :height="heights[i]"
        >
          <animate
            attributeName="y"
            :values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
            :dur="`${randoms[i]}s`"
            keyTimes="0;0.5;1"
            calcMode="spline"
            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
            begin="0s"
            repeatCount="indefinite"
          />
          <animate
            attributeName="height"
            :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
            :dur="`${randoms[i]}s`"
            keyTimes="0;0.5;1"
            calcMode="spline"
            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
            begin="0s"
            repeatCount="indefinite"
          />
        </rect>
      </template>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { randomExtend } from '../../../util'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration6',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    const rectWidth = 7

    return {
      ref: 'decoration-6',

      svgWH: [300, 35],

      svgScale: [1, 1],

      rowNum: 1,
      rowPoints: 40,

      rectWidth,
      halfRectWidth: rectWidth / 2,

      points: [],
      heights: [],
      minHeights: [],
      randoms: [],

      defaultColor: ['#7acaec', '#7acaec'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcSVGData } = this

      calcSVGData()
    },
    calcSVGData () {
      const { calcPointsPosition, calcScale } = this

      calcPointsPosition()

      calcScale()
    },
    calcPointsPosition () {
      const { svgWH, rowNum, rowPoints } = this

      const [w, h] = svgWH

      const horizontalGap = w / (rowPoints + 1)
      const verticalGap = h / (rowNum + 1)

      let points = new Array(rowNum).fill(0).map((foo, i) =>
        new Array(rowPoints).fill(0).map((foo, j) => [
          horizontalGap * (j + 1), verticalGap * (i + 1)
        ]))

      this.points = points.reduce((all, item) => [...all, ...item], [])
      const heights = this.heights = new Array(rowNum * rowPoints)
        .fill(0).map(foo =>
          Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h))

      this.minHeights = new Array(rowNum * rowPoints)
        .fill(0).map((foo, i) => heights[i] * Math.random())

      this.randoms = new Array(rowNum * rowPoints)
        .fill(0).map(foo => Math.random() + 1.5)
    },
    calcScale () {
      const { width, height, svgWH } = this

      const [w, h] = svgWH

      this.svgScale = [width / w, height / h]
    },
    onResize () {
      const { calcSVGData } = this

      calcSVGData()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/decoration7/index.js
================================================
import './src/main.css'
import Decoration7 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration7.name, Decoration7)
}


================================================
FILE: lib/components/decoration7/src/main.css
================================================
.dv-decoration-7 {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}


================================================
FILE: lib/components/decoration7/src/main.vue
================================================
<template>
  <div class="dv-decoration-7">
    <svg width="21px" height="20px">
      <polyline
        stroke-width="4"
        fill="transparent"
        :stroke="mergedColor[0]"
        points="10, 0 19, 10 10, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[1]"
        points="2, 0 11, 10 2, 20"
      />
    </svg>
    <slot></slot>
    <svg width="21px" height="20px">
      <polyline
        stroke-width="4"
        fill="transparent"
        :stroke="mergedColor[0]"
        points="11, 0 2, 10 11, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[1]"
        points="19, 0 10, 10 19, 20"
      />
    </svg>
  </div>
</template>

<script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration7',
  props: {
    color: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      defaultColor: ['#1dc1f5', '#1dc1f5'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/decoration8/index.js
================================================
import './src/main.css'
import Decoration8 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration8.name, Decoration8)
}


================================================
FILE: lib/components/decoration8/src/main.css
================================================
.dv-decoration-8 {
  display: flex;
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/decoration8/src/main.vue
================================================
<template>
  <div class="dv-decoration-8" :ref="ref">
    <svg :width="width" :height="height">
      <polyline
        :stroke="mergedColor[0]"
        stroke-width="2"
        fill="transparent"
        :points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
      />

      <polyline
        :stroke="mergedColor[0]"
        stroke-width="2"
        fill="transparent"
        :points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
      />

      <polyline
        :stroke="mergedColor[1]"
        fill="transparent"
        stroke-width="3"
        :points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
      />
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration8',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    reverse: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      ref: 'decoration-8',

      defaultColor: ['#3f96a5', '#3f96a5'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    xPos (pos) {
      const { reverse, width } = this

      if (!reverse) return pos

      return width - pos
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/decoration9/index.js
================================================
import './src/main.css'
import Decoration9 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration9.name, Decoration9)
}


================================================
FILE: lib/components/decoration9/src/main.css
================================================
.dv-decoration-9 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dv-decoration-9 svg {
  position: absolute;
  left: 0px;
  top: 0px;
  transform-origin: left top;
}


================================================
FILE: lib/components/decoration9/src/main.vue
================================================
<template>
  <div class="dv-decoration-9" :ref="ref">
    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
      <defs>
        <polygon :id="polygonId" points="15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5" />
      </defs>

      <circle
        cx="50"
        cy="50"
        r="45"
        fill="transparent"
        :stroke="mergedColor[1]"
        stroke-width="10"
        stroke-dasharray="80, 100, 30, 100"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          :dur="`${dur}s`"
          repeatCount="indefinite"
        />
      </circle>

      <circle
        cx="50"
        cy="50"
        r="45"
        fill="transparent"
        :stroke="mergedColor[0]"
        stroke-width="6"
        stroke-dasharray="50, 66, 100, 66"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;-360 50 50"
          :dur="`${dur}s`"
          repeatCount="indefinite"
        />
      </circle>

      <circle
        cx="50"
        cy="50"
        r="38"
        fill="transparent"
        :stroke="fade(mergedColor[1] || defaultColor[1], 30)"
        stroke-width="1"
        stroke-dasharray="5, 1"
      />

      <use
        v-for="(foo, i) in new Array(20).fill(0)"
        :key="i"
        :xlink:href="`#${polygonId}`"
        :stroke="mergedColor[1]"
        :fill="Math.random() > 0.4 ? 'transparent' : mergedColor[0]"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          :dur="`${dur}s`"
          :begin="`${i * dur / 20}s`"
          repeatCount="indefinite"
        />
      </use>

      <circle
        cx="50"
        cy="50"
        r="26"
        fill="transparent"
        :stroke="fade(mergedColor[1] || defaultColor[1], 30)"
        stroke-width="1"
        stroke-dasharray="5, 1"
      />
    </svg>

    <slot></slot>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import { fade } from '@jiaminghi/color'

export default {
  name: 'DvDecoration9',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    dur: {
      type: Number,
      default: 3
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'decoration-9',

      polygonId: `decoration-9-polygon-${id}`,

      svgWH: [100, 100],

      svgScale: [1, 1],

      defaultColor: ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcScale } = this

      calcScale()
    },
    calcScale () {
      const { width, height, svgWH } = this

      const [w, h] = svgWH

      this.svgScale = [width / w, height / h]
    },
    onResize () {
      const { calcScale } = this

      calcScale()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    },
    fade
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

================================================
FILE: lib/components/digitalFlop/index.js
================================================
import './src/main.css'
import DigitalFlop from './src/main.vue'

export default function (Vue) {
  Vue.component(DigitalFlop.name, DigitalFlop)
}


================================================
FILE: lib/components/digitalFlop/src/main.css
================================================
.dv-digital-flop canvas {
  width: 100%;
  height: 100%;
}


================================================
FILE: lib/components/digitalFlop/src/main.vue
================================================
<template>
  <div class="dv-digital-flop">
    <canvas ref="digital-flop" />
  </div>
</template>

<script>
import CRender from '@jiaminghi/c-render'

import '@jiaminghi/charts/lib/extend/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDigitalFlop',
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      renderer: null,

      defaultConfig: {
        /**
         * @description Number for digital flop
         * @type {Array<Number>}
         * @default number = []
         * @example number = [10]
         */
        number: [],
        /**
         * @description Content formatter
         * @type {String}
         * @default content = ''
         * @example content = '{nt}个'
         */
        content: '',
        /**
         * @description Number toFixed
         * @type {Number}
         * @default toFixed = 0
         */
        toFixed: 0,
        /**
         * @description Text align
         * @type {String}
         * @default textAlign = 'center'
         * @example textAlign = 'center' | 'left' | 'right'
         */
        textAlign: 'center',
        /**
         * @description rowGap
         * @type {Number}
         @default rowGap = 0
         */
        rowGap: 0,
        /**
         * @description Text style configuration
         * @type {Object} {CRender Class Style}
         */
        style: {
          fontSize: 30,
          fill: '#3de7c9'
        },
        /**
         * @description Number formatter
         * @type {Null|Function}
         */
        formatter: undefined,
        /**
         * @description CRender animationCurve
         * @type {String}
         * @default animationCurve = 'easeOutCubic'
         */
        animationCurve: 'easeOutCubic',
        /**
         * @description CRender animationFrame
         * @type {String}
         * @default animationFrame = 50
         */
        animationFrame: 50
      },

      mergedConfig: null,

      graph: null
    }
  },
  watch: {
    config () {
      const { update } = this

      update()
    }
  },
  methods: {
    init () {
      const { initRender, mergeConfig, initGraph } = this

      initRender()

      mergeConfig()

      initGraph()
    },
    initRender () {
      const { $refs } = this

      this.renderer = new CRender($refs['digital-flop'])
    },
    mergeConfig () {
      const { defaultConfig, config } = this

      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
    },
    initGraph () {
      const { getShape, getStyle, renderer, mergedConfig } = this

      const { animationCurve, animationFrame } = mergedConfig

      const shape = getShape()
      const style = getStyle()

      this.graph = renderer.add({
        name: 'numberText',
        animationCurve,
        animationFrame,
        shape,
        style
      })
    },
    getShape () {
      const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig

      const [w, h] = this.renderer.area

      const position = [w / 2, h / 2]

      if (textAlign === 'left') position[0] = 0
      if (textAlign === 'right') position[0] = w

      return {
        number,
        content,
        toFixed,
        position,
        rowGap,
        formatter
      }
    },
    getStyle () {
      const { style, textAlign } = this.mergedConfig

      return deepMerge(style, {
        textAlign,
        textBaseline: 'middle'
      })
    },
    update () {
      const { mergeConfig, mergeShape, getShape, getStyle, graph, mergedConfig } = this

      graph.animationEnd()

      mergeConfig()

      if (!graph) return

      const { animationCurve, animationFrame } = mergedConfig

      const shape = getShape()
      const style = getStyle()

      mergeShape(graph, shape)

      graph.animationCurve = animationCurve
      graph.animationFrame = animationFrame

      graph.animation('style', style, true)
      graph.animation('shape', shape)
    },
    mergeShape (graph, shape) {
      const cacheNum = graph.shape.number.length
      const shapeNum = shape.number.length

      if (cacheNum !== shapeNum) graph.shape.number = shape.number
    }
  },
  mounted () {
    const { init } = this

    init()
  }
}
</script>

================================================
FILE: lib/components/flylineChart/index.js
================================================
import './src/main.css'
import FlylineChart from './src/main.vue'

export default function (Vue) {
  Vue.component(FlylineChart.name, FlylineChart)
}


================================================
FILE: lib/components/flylineChart/src/main.css
================================================
.dv-flyline-chart {
  display: flex;
  flex-direction: column;
  background-size: 100% 100%;
}
.dv-flyline-chart polyline {
  transition: all 0.3s;
}
.dv-flyline-chart text {
  text-anchor: middle;
  dominant-baseline: middle;
}


================================================
FILE: lib/components/flylineChart/src/main.vue
================================================
<template>
  <div
    class="dv-flyline-chart"
    ref="dv-flyline-chart"
    :style="`background-image: url(${mergedConfig ? mergedConfig.bgImgUrl : ''})`"
    @click="consoleClickPos"
  >
    <svg v-if="mergedConfig" :width="width" :height="height">
      <defs>
        <radialGradient
          :id="gradientId"
          cx="50%" cy="50%" r="50%"
        >
          <stop
            offset="0%" stop-color="#fff"
            stop-opacity="1"
          />
          <stop
            offset="100%" stop-color="#fff"
            stop-opacity="0"
          />
        </radialGradient>

        <radialGradient
          :id="gradient2Id"
          cx="50%" cy="50%" r="50%"
        >
          <stop
            offset="0%" stop-color="#fff"
            stop-opacity="0"
          />
          <stop
            offset="100%" stop-color="#fff"
            stop-opacity="1"
          />
        </radialGradient>

        <circle
          v-if="paths[0]"
          :id="`circle${paths[0].toString()}`"
          :cx="paths[0][2][0]"
          :cy="paths[0][2][1]"
        >
          <animate
            attributeName="r"
            :values="`1;${mergedConfig.halo.radius}`"
            :dur="mergedConfig.halo.duration / 10 + 's'"
            repeatCount="indefinite"
          />
          <animate
            attributeName="opacity"
            values="1;0"
            :dur="mergedConfig.halo.duration / 10 + 's'"
            repeatCount="indefinite"
          />
        </circle>
      </defs>

      <image
        v-if="paths[0]"
        :xlink:href="mergedConfig.centerPointImg.url"
        :width="mergedConfig.centerPointImg.width"
        :height="mergedConfig.centerPointImg.height"
        :x="paths[0][2][0] - mergedConfig.centerPointImg.width / 2"
        :y="paths[0][2][1] - mergedConfig.centerPointImg.height / 2"
      />

      <mask :id="`maskhalo${paths[0].toString()}`">
        <use
          v-if="paths[0]"
          :xlink:href="`#circle${paths[0].toString()}`"
          :fill="`url(#${gradient2Id})`"
        />
      </mask>

      <use
        v-if="paths[0] && mergedConfig.halo.show"
        :xlink:href="`#circle${paths[0].toString()}`"
        :fill="mergedConfig.halo.color"
        :mask="`url(#maskhalo${paths[0].toString()})`"
      />

      <g
        v-for="(path, i) in paths"
        :key="i"
      >
        <defs>
          <path
            :id="`path${path.toString()}`"
            :ref="`path${i}`"
            :d="`M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`"
            fill="transparent"
          />
        </defs>

        <use
          :xlink:href="`#path${path.toString()}`"
          :stroke-width="mergedConfig.lineWidth"
          :stroke="mergedConfig.orbitColor"
        />

        <use
          v-if="lengths[i]"
          :xlink:href="`#path${path.toString()}`"
          :stroke-width="mergedConfig.lineWidth"
          :stroke="mergedConfig.flylineColor"
          :mask="`url(#mask${unique}${path.toString()})`"
        >
          <animate
            attributeName="stroke-dasharray"
            :from="`0, ${lengths[i]}`"
            :to="`${lengths[i]}, 0`"
            :dur="times[i] || 0"
            repeatCount="indefinite"
          />
        </use>

        <mask :id="`mask${unique}${path.toString()}`">
          <circle cx="0" cy="0" :r="mergedConfig.flylineRadius" :fill="`url(#${gradientId})`">
            <animateMotion
              :dur="times[i] || 0"
              :path="`M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`"
              rotate="auto"
              repeatCount="indefinite"
            />
          </circle>
        </mask>

        <image
          :xlink:href="mergedConfig.pointsImg.url"
          :width="mergedConfig.pointsImg.width"
          :height="mergedConfig.pointsImg.height"
          :x="path[0][0] - mergedConfig.pointsImg.width / 2"
          :y="path[0][1] - mergedConfig.pointsImg.height / 2"
        />

        <text
          :style="`fontSize:${mergedConfig.text.fontSize}px;`"
          :fill="mergedConfig.text.color"
          :x="path[0][0] + mergedConfig.text.offset[0]"
          :y="path[0][1] + mergedConfig.text.offset[1]"
        >
          {{ texts[i] }}
        </text>

      </g>
    </svg>
  </div>
</template>

<script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import { randomExtend, getPointDistance, uuid } from '../../../util/index'

import autoResize from '../../../mixin/autoResize'

export default {
  name: 'DvFlylineChart',
  mixins: [autoResize],
  props: {
    config: {
      type: Object,
      default: () => ({})
    },
    dev: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'dv-flyline-chart',
      unique: Math.random(),
      maskId: `flyline-mask-id-${id}`,
      maskCircleId: `mask-circle-id-${id}`,
      gradientId: `gradient-id-${id}`,
      gradient2Id: `gradient2-id-${id}`,

      defaultConfig: {
        /**
         * @description Flyline chart center point
         * @type {Array<Number>}
         * @default centerPoint = [0, 0]
         */
        centerPoint: [0, 0],
        /**
         * @description Flyline start points
         * @type {Array<Array<Number>>}
         * @default points = []
         * @example points = [[10, 10], [100, 100]]
         */
        points: [],
        /**
         * @description Flyline width
         * @type {Number}
         * @default lineWidth = 1
         */
        lineWidth: 1,
        /**
         * @description Orbit color
         * @type {String}
         * @default orbitColor = 'rgba(103, 224, 227, .2)'
         */
        orbitColor: 'rgba(103, 224, 227, .2)',
        /**
         * @description Flyline color
         * @type {String}
         * @default orbitColor = '#ffde93'
         */
        flylineColor: '#ffde93',
        /**
         * @description K value
         * @type {Number}
         * @default k = -0.5
         * @example k = -1 ~ 1
         */
        k: -0.5,
        /**
         * @description Flyline curvature
         * @type {Number}
         * @default curvature = 5
         */
        curvature: 5,
        /**
         * @description Flyline radius
         * @type {Number}
         * @default flylineRadius = 100
         */
        flylineRadius: 100,
        /**
         * @description Flyline animation duration
         * @type {Array<Number>}
         * @default duration = [20, 30]
         */
        duration: [20, 30],
        /**
         * @description Relative points position
         * @type {Boolean}
         * @default relative = true
         */
        relative: true,
        /**
         * @description Back ground image url
         * @type {String}
         * @default bgImgUrl = ''
         * @example bgImgUrl = './img/bg.jpg'
         */
        bgImgUrl: '',
        /**
         * @description Text configuration
         * @type {Object}
         */
        text: {
          /**
           * @description Text offset
           * @type {Array<Number>}
           * @default offset = [0, 15]
           */
          offset: [0, 15],
          /**
           * @description Text color
           * @type {String}
           * @default color = '#ffdb5c'
           */
          color: '#ffdb5c',
          /**
           * @description Text font size
           * @type {Number}
           * @default fontSize = 12
           */
          fontSize: 12
        },
        /**
         * @description Halo configuration
         * @type {Object}
         */
        halo: {
          /**
           * @description Weather to show halo
           * @type {Boolean}
           * @default show = true
           * @example show = true | false
           */
          show: true,
          /**
           * @description Halo animation duration (10 = 1s)
           * @type {Number}
           * @default duration = 30
           */
          duration: 30,
          /**
           * @description Halo color
           * @type {String}
           * @default color = '#fb7293'
           */
          color: '#fb7293',
          /**
           * @description Halo max radius
           * @type {Number}
           * @default radius = 120
           */
          radius: 120
        },
        /**
         * @description Center point img configuration
         * @type {Object}
         */
        centerPointImg: {
          /**
           * @description Center point img width
           * @type {Number}
           * @default width = 40
           */
          width: 40,
          /**
           * @description Center point img height
           * @type {Number}
           * @default height = 40
           */
          height: 40,
          /**
           * @description Center point img url
           * @type {String}
           * @default url = ''
           */
          url: ''
        },
        /**
         * @description Points img configuration
         * @type {Object}
         * @default radius = 120
         */
        pointsImg: {
          /**
           * @description Points img width
           * @type {Number}
           * @default width = 15
           */
          width: 15,
          /**
           * @description Points img height
           * @type {Number}
           * @default height = 15
           */
          height: 15,
          /**
           * @description Points img url
           * @type {String}
           * @default url = ''
           */
          url: ''
        }
      },

      mergedConfig: null,

      paths: [],
      lengths: [],
      times: [],
      texts: []
    }
  },
  watch: {
    config () {
      const { calcData } = this

      calcData()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcData } = this

      calcData()
    },
    onResize () {
      const { calcData } = this

      calcData()
    },
    async calcData () {
      const { mergeConfig, createFlylinePaths, calcLineLengths } = this

      mergeConfig()

      createFlylinePaths()

      await calcLineLengths()

      const { calcTimes, calcTexts } = this

      calcTimes()

      calcTexts()
    },
    mergeConfig () {
      let { config, defaultConfig } = this

      const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})

      const { points } = mergedConfig

      mergedConfig.points = points.map(item => {
        if (item instanceof Array) {
          return { position: item, text: '' }
        }

        return item
      })

      this.mergedConfig = mergedConfig
    },
    createFlylinePaths () {
      const { getPath, mergedConfig, width, height } = this

      let { centerPoint, points, relative } = mergedConfig

      points = points.map(({ position }) => position)

      if (relative) {
        centerPoint = [width * centerPoint[0], height * centerPoint[1]]
        points = points.map(([x, y]) => [width * x, height * y])
      }

      this.paths = points.map(point => getPath(centerPoint, point))
    },
    getPath (center, point) {
      const { getControlPoint } = this

      const controlPoint = getControlPoint(center, point)

      return [point, controlPoint, center]
    },
    getControlPoint ([sx, sy], [ex, ey]) {
      const { getKLinePointByx, mergedConfig } = this

      const { curvature, k } = mergedConfig

      const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2]

      const distance = getPointDistance([sx, sy], [ex, ey])

      const targetLength = distance / curvature
      const disDived = targetLength / 2

      let [dx, dy] = [mx, my]

      do {
        dx += disDived
        dy = getKLinePointByx(k, [mx, my], dx)[1]
      } while (getPointDistance([mx, my], [dx, dy]) < targetLength)

      return [dx, dy]
    },
    getKLinePointByx (k, [lx, ly], x) {
      const y = ly - k * lx + k * x

      return [x, y]
    },
    async calcLineLengths () {
      const { $nextTick, paths, $refs } = this

      await $nextTick()

      this.lengths = paths.map((foo, i) => $refs[`path${i}`][0].getTotalLength())
    },
    calcTimes () {
      const { duration, points } = this.mergedConfig

      this.times = points.map(foo => randomExtend(...duration) / 10)
    },
    calcTexts () {
      const { points } = this.mergedConfig

      this.texts = points.map(({ text }) => text)
    },
    consoleClickPos ({ offsetX, offsetY }) {
      const { width, height, dev } = this

      if (!dev) return

      const relativeX = (offsetX / width).toFixed(2)
      const relativeY = (offsetY / height).toFixed(2)

      console.warn(`dv-flyline-chart DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`)
    }
  }
}
</script>

================================================
FILE: lib/components/flylineChartEnhanced/index.js
================================================
import './src/main.css'
import FlylineChartEnhanced from './src/main.vue'

export default function (Vue) {
  Vue.component(FlylineChartEnhanced.name, FlylineChartEnhanced)
}


================================================
FILE: lib/components/flylineChartEnhanced/src/main.css
================================================
.dv-flyline-chart-enhanced {
  display: flex;
  flex-direction: column;
  background-size: 100% 100%;
}
.dv-flyline-chart-enhanced text {
  text-anchor: middle;
  dominant-baseline: middle;
}


================================================
FILE: lib/components/flylineChartEnhanced/src/main.vue
================================================
<template>
  <div
    class="dv-flyline-chart-enhanced"
    :style="`background-image: url(${mergedConfig ? mergedConfig.bgImgSrc : ''})`"
    :ref="ref"
    @click="consoleClickPos"
  >
    <svg v-if="flylines.length" :width="width" :height="height">
      <defs>
        <radialGradient
          :id="flylineGradientId"
          cx="50%" cy="50%" r="50%"
        >
          <stop
            offset="0%" stop-color="#fff"
            stop-opacity="1"
          />
          <stop
            offset="100%" stop-color="#fff"
            stop-opacity="0"
          />
        </radialGradient>

        <radialGradient
          :id="haloGradientId"
          cx="50%" cy="50%" r="50%"
        >
          <stop
            offset="0%" stop-color="#fff"
            stop-opacity="0"
          />
          <stop
            offset="100%" stop-color="#fff"
            stop-opacity="1"
          />
        </radialGradient>
      </defs>

      <!-- points -->
      <g v-for="point in flylinePoints" :key="point.key + Math.random()">
        <defs>
          <circle
            v-if="point.halo.show"
            :id="`halo${unique}${point.key}`"
            :cx="point.coordinate[0]"
            :cy="point.coordinate[1]"
          >
            <animate
              attributeName="r"
              :values="`1;${point.halo.radius}`"
              :dur="`${point.halo.time}s`"
              repeatCount="indefinite"
            />
            <animate
              attributeName="opacity"
              values="1;0"
              :dur="`${point.halo.time}s`"
              repeatCount="indefinite"
            />
          </circle>
        </defs>

        <!-- halo gradient mask -->
        <mask :id="`mask${unique}${point.key}`">
          <use
            v-if="point.halo.show"
            :xlink:href="`#halo${unique}${point.key}`"
            :fill="`url(#${haloGradientId})`"
          />
        </mask>

        <!-- point halo -->
        <use
          v-if="point.halo.show"
          :xlink:href="`#halo${unique}${point.key}`"
          :fill="point.halo.color"
          :mask="`url(#mask${unique}${point.key})`"
        />

        <!-- point icon -->
        <image
          v-if="point.icon.show"
          :xlink:href="point.icon.src"
          :width="point.icon.width"
          :height="point.icon.height"
          :x="point.icon.x"
          :y="point.icon.y"
        />

        <!-- point text -->
        <text
          v-if="point.text.show"
          :style="`fontSize:${point.text.fontSize}px;color:${point.text.color}`"
          :fill="point.text.color"
          :x="point.text.x"
          :y="point.text.y"
        >
          {{ point.name }}
        </text>
      </g>

      <!-- flylines -->
      <g v-for="(line, i) in flylines" :key="line.key + Math.random()">
        <defs>
          <path
            :id="line.key"
            :ref="line.key"
            :d="line.d"
            fill="transparent"
          />
        </defs>

        <!-- orbit line -->
        <use
          :xlink:href="`#${line.key}`"
          :stroke-width="line.width"
          :stroke="line.orbitColor"
        />

        <!-- fly line gradient mask -->
        <mask :id="`mask${unique}${line.key}`">
          <circle cx="0" cy="0" :r="line.radius" :fill="`url(#${flylineGradientId})`">
            <animateMotion
              :dur="line.time"
              :path="line.d"
              rotate="auto"
              repeatCount="indefinite"
            />
          </circle>
        </mask>

        <!-- fly line -->
        <use
          v-if="flylineLengths[i]"
          :xlink:href="`#${line.key}`"
          :stroke-width="line.width"
          :stroke="line.color"
          :mask="`url(#mask${unique}${line.key})`"
        >
          <animate
            attributeName="stroke-dasharray"
            :from="`0, ${flylineLengths[i]}`"
            :to="`${flylineLengths[i]}, 0`"
            :dur="line.time"
            repeatCount="indefinite"
          />
        </use>
      </g>
    </svg>
  </div>
</template>

<script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import { randomExtend, getPointDistance, uuid } from '../../../util/index'

import autoResize from '../../../mixin/autoResize'

export default {
  name: 'DvFlylineChartEnhanced',
  mixins: [autoResize],
  props: {
    config: {
      type: Object,
      default: () => ({})
    },
    dev: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'dv-flyline-chart-enhanced',
      unique: Math.random(),
      flylineGradientId: `flyline-gradient-id-${id}`,
      haloGradientId: `halo-gradient-id-${id}`,
      /**
       * @description Type Declaration
       * 
       * interface Halo {
       *    show?: boolean
       *    duration?: [number, number]
       *    color?: string
       *    radius?: number
       * }
       * 
       * interface Text {
       *    show?: boolean
       *    offset?: [number, number]
       *    color?: string
       *    fontSize?: number
       * }
       * 
       * interface Icon {
       *    show?: boolean
       *    src?: string
       *    width?: number
       *    height?: number
       * }
       * 
       * interface Point {
       *    name: string
       *    coordinate: [number, number]
       *    halo?: Halo
       *    text?: Text
       *    icon?: Icon
       * }
       * 
       * interface Line {
       *    width?: number
       *    color?: string
       *    orbitColor?: string
       *    duration?: [number, number]
       *    radius?: string
       * }
       * 
       * interface Flyline extends Line {
       *    source: string
       *    target: string
       * }
       * 
       * interface FlylineWithPath extends Flyline {
       *    d: string
       *    path: [[number, number], [number, number], [number, number]]
       *    key: string
       * }
       */
      defaultConfig: {
        /**
         * @description Flyline chart points
         * @type {Point[]}
         * @default points = []
         */
        points: [],
        /**
         * @description Lines
         * @type {Flyline[]}
         * @default lines = []
         */
        lines: [],
        /**
         * @description Global halo configuration
         * @type {Halo}
         */
        halo: {
          /**
           * @description Whether to show halo
           * @type {Boolean}
           * @default show = false
           */
          show: false,
          /**
           * @description Halo animation duration (1s = 10)
           * @type {[number, number]}
           */
          duration: [20, 30],
          /**
           * @description Halo color
           * @type {String}
           * @default color = '#fb7293'
           */
          color: '#fb7293',
          /**
           * @description Halo radius
           * @type {Number}
           * @default radius = 120
           */
          radius: 120
        },
        /**
         * @description Global text configuration
         * @type {Text}
         */
        text: {
          /**
           * @description Whether to show text
           * @type {Boolean}
           * @default show = false
           */
          show: false,
          /**
           * @description Text offset
           * @type {[number, number]}
           * @default offset = [0, 15]
           */
          offset: [0, 15],
          /**
           * @description Text color
           * @type {String}
           * @default color = '#ffdb5c'
           */
          color: '#ffdb5c',
          /**
           * @description Text font size
           * @type {Number}
           * @default fontSize = 12
           */
          fontSize: 12
        },
        /**
         * @description Global icon configuration
         * @type {Icon}
         */
        icon: {
          /**
           * @description Whether to show icon
           * @type {Boolean}
           * @default show = false
           */
          show: false,
          /**
           * @description Icon src
           * @type {String}
           * @default src = ''
           */
          src: '',
          /**
           * @description Icon width
           * @type {Number}
           * @default width = 15
           */
          width: 15,
          /**
           * @description Icon height
           * @type {Number}
           * @default width = 15
           */
          height: 15
        },
        /**
         * @description Global line configuration
         * @type {Line}
         */
        line: {
          /**
           * @description Line width
           * @type {Number}
           * @default width = 1
           */
          width: 1,
          /**
           * @description Flyline color
           * @type {String}
           * @default color = '#ffde93'
           */
          color: '#ffde93',
          /**
           * @description Orbit color
           * @type {String}
           * @default orbitColor = 'rgba(103, 224, 227, .2)'
           */
          orbitColor: 'rgba(103, 224, 227, .2)',
          /**
           * @description Flyline animation duration
           * @type {[number, number]}
           * @default duration = [20, 30]
           */
          duration: [20, 30],
          /**
           * @description Flyline radius
           * @type {Number}
           * @default radius = 100
           */
          radius: 100
        },
        /**
         * @description Back ground image url
         * @type {String}
         * @default bgImgSrc = ''
         */
        bgImgSrc: '',
        /**
         * @description K value
         * @type {Number}
         * @default k = -0.5
         * @example k = -1 ~ 1
         */
        k: -0.5,
        /**
         * @description Flyline curvature
         * @type {Number}
         * @default curvature = 5
         */
        curvature: 5,
        /**
         * @description Relative points position
         * @type {Boolean}
         * @default relative = true
         */
        relative: true
      },
      /**
       * @description Fly line data
       * @type {FlylineWithPath[]}
       * @default flylines = []
       */
      flylines: [],
      /**
       * @description Fly line lengths
       * @type {Number[]}
       * @default flylineLengths = []
       */
      flylineLengths: [],
      /**
       * @description Fly line points
       * @default flylinePoints = []
       */
      flylinePoints: [],

      mergedConfig: null
    }
  },
  watch: {
    config () {
      const { calcData } = this

      calcData()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcData } = this

      calcData()
    },
    onResize () {
      const { calcData } = this

      calcData()
    },
    async calcData () {
      const { mergeConfig, calcflylinePoints, calcLinePaths } = this

      mergeConfig()

      calcflylinePoints()

      calcLinePaths()

      const { calcLineLengths } = this

      await calcLineLengths()
    },
    mergeConfig () {
      let { config, defaultConfig } = this

      const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})

      const { points, lines, halo, text, icon, line } = mergedConfig

      mergedConfig.points = points.map(item => {
        item.halo = deepMerge(deepClone(halo, true), item.halo || {})
        item.text = deepMerge(deepClone(text, true), item.text || {})
        item.icon = deepMerge(deepClone(icon, true), item.icon || {})

        return item
      })

      mergedConfig.lines = lines.map(item => {
        return deepMerge(deepClone(line, true), item)
      })

      this.mergedConfig = mergedConfig
    },
    calcflylinePoints () {
      const { mergedConfig, width, height } = this

      const { relative, points } = mergedConfig

      this.flylinePoints = points.map((item, i) => {
        const { coordinate: [x, y], halo, icon, text } = item

        if (relative) item.coordinate = [x * width, y * height]

        item.halo.time = randomExtend(...halo.duration) / 10

        const { width: iw, height: ih } = icon
        item.icon.x = item.coordinate[0] - iw / 2
        item.icon.y = item.coordinate[1] - ih / 2

        const [ox, oy] = text.offset
        item.text.x = item.coordinate[0] + ox
        item.text.y = item.coordinate[1] + oy

        item.key = `${item.coordinate.toString()}${i}`

        return item
      })
    },
    calcLinePaths () {
      const { getPath, mergedConfig } = this

      const { points, lines } = mergedConfig

      this.flylines = lines.map(item => {
        const { source, target, duration } = item

        const sourcePoint = points.find(({ name }) => name === source).coordinate
        const targetPoint = points.find(({ name }) => name === target).coordinate

        const path = getPath(sourcePoint, targetPoint).map(item => item.map(v => parseFloat(v.toFixed(10))))
        const d = `M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`
        const key = `path${path.toString()}`
        const time = randomExtend(...duration) / 10

        return { ...item, path, key, d, time }
      })
    },
    getPath (start, end) {
      const { getControlPoint } = this

      const controlPoint = getControlPoint(start, end)

      return [start, controlPoint, end]
    },
    getControlPoint ([sx, sy], [ex, ey]) {
      const { getKLinePointByx, mergedConfig } = this

      const { curvature, k } = mergedConfig

      const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2]

      const distance = getPointDistance([sx, sy], [ex, ey])

      const targetLength = distance / curvature
      const disDived = targetLength / 2

      let [dx, dy] = [mx, my]

      do {
        dx += disDived
        dy = getKLinePointByx(k, [mx, my], dx)[1]
      } while (getPointDistance([mx, my], [dx, dy]) < targetLength)

      return [dx, dy]
    },
    getKLinePointByx (k, [lx, ly], x) {
      const y = ly - k * lx + k * x

      return [x, y]
    },
    async calcLineLengths () {
      const { $nextTick, flylines, $refs } = this

      await $nextTick()

      this.flylineLengths = flylines.map(({ key }) => $refs[key][0].getTotalLength())
    },
    consoleClickPos ({ offsetX, offsetY }) {
      const { width, height, dev } = this

      if (!dev) return

      const relativeX = (offsetX / width).toFixed(2)
      const relativeY = (offsetY / height).toFixed(2)

      console.warn(`dv-flyline-chart-enhanced DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`)
    }
  }
}
</script>

================================================
FILE: lib/components/fullScreenContainer/index.js
================================================
import './src/main.css'
import FullScreenContainer from './src/main.vue'

export default function (Vue) {
  Vue.component(FullScreenContainer.name, FullScreenContainer)
}


================================================
FILE: lib/components/fullScreenContainer/src/main.css
================================================
#dv-full-screen-container {
  position: fixed;
  top: 0px;
  left: 0px;
  overflow: hidden;
  transform-origin: left top;
  z-index: 999;
}


================================================
FILE: lib/components/fullScreenContainer/src/main.vue
================================================
<template>
  <div id="dv-full-screen-container" :ref="ref">
    <template v-if="ready">
      <slot></slot>
    </template>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize.js'

export default {
  name: 'DvFullScreenContainer',
  mixins: [autoResize],
  data () {
    return {
      ref: 'full-screen-container',
      allWidth: 0,
      scale: 0,
      datavRoot: '',
      ready: false
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { initConfig, setAppScale } = this

      initConfig()

      setAppScale()

      this.ready = true
    },
    initConfig () {
      const { dom } = this
      const { width, height } = screen

      this.allWidth = width

      dom.style.width = `${width}px`
      dom.style.height = `${height}px`
    },
    setAppScale () {
      const { allWidth, dom } = this

      const currentWidth = document.body.clientWidth

      dom.style.transform = `scale(${currentWidth / allWidth})`
    },
    onResize () {
      const { setAppScale } = this

      setAppScale()
    }
  }
}
</script>

================================================
FILE: lib/components/loading/index.js
================================================
import './src/main.css'
import Loading from './src/main.vue'

export default function (Vue) {
  Vue.component(Loading.name, Loading)
}


================================================
FILE: lib/components/loading/src/main.css
================================================
.dv-loading {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dv-loading .loading-tip {
  font-size: 15px;
}


================================================
FILE: lib/components/loading/src/main.vue
================================================
<template>
  <div class="dv-loading">
    <svg width="50px" height="50px">
      <circle
        cx="25"
        cy="25"
        r="20"
        fill="transparent"
        stroke-width="3"
        stroke-dasharray="31.415, 31.415"
        stroke="#02bcfe"
        stroke-linecap="round"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0, 25 25;360, 25 25"
          dur="1.5s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="stroke"
          values="#02bcfe;#3be6cb;#02bcfe"
          dur="3s"
          repeatCount="indefinite"
        />
      </circle>

      <circle
        cx="25"
        cy="25"
        r="10"
        fill="transparent"
        stroke-width="3"
        stroke-dasharray="15.7, 15.7"
        stroke="#3be6cb"
        stroke-linecap="round"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="360, 25 25;0, 25 25"
          dur="1.5s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="stroke"
          values="#3be6cb;#02bcfe;#3be6cb"
          dur="3s"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
    <div class="loading-tip">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DvLoading'
}
</script>

================================================
FILE: lib/components/percentPond/index.js
================================================
import './src/main.css'
import PercentPond from './src/main.vue'

export default function (Vue) {
  Vue.component(PercentPond.name, PercentPond)
}


================================================
FILE: lib/components/percentPond/src/main.css
================================================
.dv-percent-pond {
  position: relative;
  display: flex;
  flex-direction: column;
}
.dv-percent-pond svg {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.dv-percent-pond polyline {
  transition: all 0.3s;
}
.dv-percent-pond text {
  font-size: 25px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: middle;
}


================================================
FILE: lib/components/percentPond/src/main.vue
================================================
<template>
  <div class="dv-percent-pond" ref="percent-pond">
    <svg>
      <defs>
        <linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop v-for="lc in linearGradient" :key="lc[0]"
            :offset="`${lc[0]}%`"
            :stop-color="lc[1]" />
        </linearGradient>

        <linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
          <stop v-for="lc in linearGradient" :key="lc[0]"
            :offset="`${lc[0]}%`"
            :stop-color="lc[1]" />
        </linearGradient>
      </defs>
      <rect
        :x="mergedConfig ? mergedConfig.borderWidth / 2 : '0'"
        :y="mergedConfig ? mergedConfig.borderWidth / 2 : '0'"
        :rx="mergedConfig ? mergedConfig.borderRadius : '0'"
        :ry="mergedConfig ? mergedConfig.borderRadius : '0'"
        fill="transparent"
        :stroke-width="mergedConfig ? mergedConfig.borderWidth : '0'"
        :stroke="`url(#${gradientId1})`"
        :width="rectWidth > 0 ? rectWidth : 0"
        :height="rectHeight > 0 ? rectHeight : 0"
      />
      <polyline
        :stroke-width="polylineWidth"
        :stroke-dasharray="mergedConfig ? mergedConfig.lineDash.join(',') : '0'"
        :stroke="`url(#${polylineGradient})`"
        :points="points"
      />
      <text
        :stroke="mergedConfig ? mergedConfig.textColor : '#fff'"
        :fill="mergedConfig ? mergedConfig.textColor : '#fff'"
        :x="width / 2"
        :y="height / 2"
      >
        {{ details }}
      </text>
    </svg>
  </div>
</template>

<script>
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvPercentPond',
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    const id = uuid()
    return {
      gradientId1: `percent-pond-gradientId1-${id}`,
      gradientId2: `percent-pond-gradientId2-${id}`,

      width: 0,
      height: 0,

      defaultConfig: {
        /**
         * @description Value
         * @type {Number}
         * @default value = 0
         */
        value: 0,
        /**
         * @description Colors (hex|rgb|rgba|color keywords)
         * @type {Array<String>}
         * @default colors = ['#00BAFF', '#3DE7C9']
         * @example colors = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
         */
        colors: ['#3DE7C9', '#00BAFF'],
        /**
         * @description Border width
         * @type {Number}
         * @default borderWidth = 3
         */
        borderWidth: 3,
        /**
         * @description Gap between border and pond
         * @type {Number}
         * @default borderGap = 3
         */
        borderGap: 3,
        /**
         * @description Line dash
         * @type {Array<Number>}
         * @default lineDash = [5, 1]
         */
        lineDash: [5, 1],
        /**
         * @description Text color
         * @type {String}
         * @default textColor = '#fff'
         */
        textColor: '#fff',
        /**
         * @description Border radius
         * @type {Number}
         * @default borderRadius = 5
         */
        borderRadius: 5,
        /**
         * @description Local Gradient
         * @type {Boolean}
         * @default localGradient = false
         * @example localGradient = false | true
         */
        localGradient: false,
        /**
         * @description Formatter
         * @type {String}
         * @default formatter = '{value}%'
         */
        formatter: '{value}%'
      },

      mergedConfig: null
    }
  },
  computed: {
    rectWidth () {
      const { mergedConfig, width } = this

      if (!mergedConfig) return 0

      const { borderWidth } = mergedConfig

      return width - borderWidth
    },
    rectHeight () {
      const { mergedConfig, height } = this

      if (!mergedConfig) return 0

      const { borderWidth } = mergedConfig

      return height - borderWidth
    },
    points () {
      const { mergedConfig, width, height } = this

      const halfHeight = height / 2

      if (!mergedConfig) return `0, ${halfHeight} 0, ${halfHeight}`

      const { borderWidth, borderGap, value } = mergedConfig

      const polylineLength = (width - (borderWidth + borderGap) * 2) / 100 * value

      return `
        ${borderWidth + borderGap}, ${halfHeight}
        ${borderWidth + borderGap + polylineLength}, ${halfHeight + 0.001}
      `
    },
    polylineWidth () {
      const { mergedConfig, height } = this

      if (!mergedConfig) return 0

      const { borderWidth, borderGap } = mergedConfig

      return height - (borderWidth + borderGap) * 2
    },
    linearGradient () {
      const { mergedConfig } = this

      if (!mergedConfig) return []

      const { colors } = mergedConfig

      const colorNum = colors.length

      const colorOffsetGap = 100 / (colorNum - 1)

      return colors.map((c, i) => [colorOffsetGap * i, c])
    },
    polylineGradient () {
      const { gradientId1, gradientId2, mergedConfig } = this

      if (!mergedConfig) return gradientId2

      if (mergedConfig.localGradient) return gradientId1

      return gradientId2
    },
    gradient2XPos () {
      const { mergedConfig } = this

      if (!mergedConfig) return '100%'

      const { value } = mergedConfig

      return `${200 - value}%`
    },
    details () {
      const { mergedConfig } = this

      if (!mergedConfig) return ''

      const { value, formatter } = mergedConfig

      return formatter.replace('{value}', value)
    }
  },
  watch: {
    config () {
      const { mergeConfig } = this

      mergeConfig()
    }
  },
  methods: {
    async init () {
      const { initWH, config, mergeConfig } = this

      await initWH()

      if (!config) return

      mergeConfig()
    },
    async initWH () {
      const { $nextTick, $refs } = this

      await $nextTick()

      const { clientWidth, clientHeight } = $refs['percent-pond']

      this.width = clientWidth
      this.height = clientHeight
    },
    mergeConfig () {
      const { config, defaultConfig } = this

      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
    }
  },
  mounted () {
    const { init } = this

    init()
  }
}
</script>

================================================
FILE: lib/components/scrollBoard/index.js
================================================
import './src/main.css'
import ScrollBoard from './src/main.vue'

export default function (Vue) {
  Vue.component(ScrollBoard.name, ScrollBoard)
}


================================================
FILE: lib/components/scrollBoard/src/main.css
================================================
.dv-scroll-board {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
}
.dv-scroll-board .text {
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dv-scroll-board .header {
  display: flex;
  flex-direction: row;
  font-size: 15px;
}
.dv-scroll-board .header .header-item {
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s;
}
.dv-scroll-board .rows {
  overflow: hidden;
}
.dv-scroll-board .rows .row-item {
  display: flex;
  font-size: 14px;
  transition: all 0.3s;
}
.dv-scroll-board .rows .ceil {
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dv-scroll-board .rows .index {
  border-radius: 3px;
  padding: 0px 3px;
}


================================================
FILE: lib/components/scrollBoard/src/main.vue
================================================
<template>
  <div class="dv-scroll-board" :ref="ref">
    <div class="header" v-if="header.length && mergedConfig" :style="`background-color: ${mergedConfig.headerBGC};`">
      <div
        class="header-item"
        v-for="(headerItem, i) in header"
        :key="`${headerItem}${i}`"
        :style="`
          height: ${mergedConfig.headerHeight}px;
          line-height: ${mergedConfig.headerHeight}px;
          width: ${widths[i]}px;
        `"
        :align="aligns[i]"
        v-html="headerItem"
      />
    </div>

    <div
      v-if="mergedConfig"
      class="rows"
      :style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)}px;`"
    >
      <div
        class="row-item"
        v-for="(row, ri) in rows"
        :key="`${row.toString()}${row.scroll}`"
        :style="`
          height: ${heights[ri]}px;
          line-height: ${heights[ri]}px;
          background-color: ${mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
        `"
      >
        <div
          class="ceil"
          v-for="(ceil, ci) in row.ceils"
          :key="`${ceil}${ri}${ci}`"
          :style="`width: ${widths[ci]}px;`"
          :align="aligns[ci]"
          v-html="ceil"
          @click="emitEvent('click', ri, ci, row, ceil)"
          @mouseenter="handleHover(true, ri, ci, row, ceil)"
          @mouseleave="handleHover(false)"
        />

      </div>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvScrollBoard',
  mixins: [autoResize],
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      ref: 'scroll-board',

      defaultConfig: {
        /**
         * @description Board header
         * @type {Array<String>}
         * @default header = []
         * @example header = ['column1', 'column2', 'column3']
         */
        header: [],
        /**
         * @description Board data
         * @type {Array<Array>}
         * @default data = []
         */
        data: [],
        /**
         * @description Row num
         * @type {Number}
         * @default rowNum = 5
         */
        rowNum: 5,
        /**
         * @description Header background color
         * @type {String}
         * @default headerBGC = '#00BAFF'
         */
        headerBGC: '#00BAFF',
        /**
         * @description Odd row background color
         * @type {String}
         * @default oddRowBGC = '#003B51'
         */
        oddRowBGC: '#003B51',
        /**
         * @description Even row background color
         * @type {String}
         * @default evenRowBGC = '#003B51'
         */
        evenRowBGC: '#0A2732',
        /**
         * @description Scroll wait time
         * @type {Number}
         * @default waitTime = 2000
         */
        waitTime: 2000,
        /**
         * @description Header height
         * @type {Number}
         * @default headerHeight = 35
         */
        headerHeight: 35,
        /**
         * @description Column width
         * @type {Array<Number>}
         * @default columnWidth = []
         */
        columnWidth: [],
        /**
         * @description Column align
         * @type {Array<String>}
         * @default align = []
         * @example align = ['left', 'center', 'right']
         */
        align: [],
        /**
         * @description Show index
         * @type {Boolean}
         * @default index = false
         */
        index: false,
        /**
         * @description index Header
         * @type {String}
         * @default indexHeader = '#'
         */
        indexHeader: '#',
        /**
         * @description Carousel type
         * @type {String}
         * @default carousel = 'single'
         * @example carousel = 'single' | 'page'
         */
        carousel: 'single',
        /**
         * @description Pause scroll when mouse hovered
         * @type {Boolean}
         * @default hoverPause = true
         * @example hoverPause = true | false
         */
        hoverPause: true
      },

      mergedConfig: null,

      header: [],

      rowsData: [],

      rows: [],

      widths: [],

      heights: [],

      avgHeight: 0,

      aligns: [],

      animationIndex: 0,

      animationHandler: '',

      updater: 0,

      needCalc: false
    }
  },
  watch: {
    config () {
      const { stopAnimation, calcData } = this

      stopAnimation()

      this.animationIndex = 0

      calcData()
    }
  },
  methods: {
    handleHover(enter, ri, ci, row, ceil){
      const { mergedConfig, emitEvent, stopAnimation, animation } = this

      if (enter) emitEvent('mouseover', ri, ci, row, ceil)
      if (!mergedConfig.hoverPause) return

      if (enter) {
        stopAnimation()
      } else {
        animation(true)
      }
    },
    afterAutoResizeMixinInit () {
      const { calcData } = this

      calcData()
    },
    onResize () {
      const { mergedConfig, calcWidths, calcHeights } = this

      if (!mergedConfig) return

      calcWidths()

      calcHeights()
    },
    calcData () {
      const { mergeConfig, calcHeaderData, calcRowsData } = this

      mergeConfig()

      calcHeaderData()

      calcRowsData()

      const { calcWidths, calcHeights, calcAligns } = this

      calcWidths()

      calcHeights()

      calcAligns()

      const { animation } = this

      animation(true)
    },
    mergeConfig () {
      let { config, defaultConfig } = this

      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
    },
    calcHeaderData () {
      let { header, index, indexHeader} = this.mergedConfig

      if (!header.length) {
        this.header = []

        return
      }

      header = [...header]

      if (index) header.unshift(indexHeader)

      this.header = header
    },
    calcRowsData () {
      let { data, index, headerBGC, rowNum } = this.mergedConfig

      if (index) {
        data = data.map((row, i) => {
          row = [...row]

          const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</span>`

          row.unshift(indexTag)

          return row
        })
      }

      data = data.map((ceils, i) => ({ ceils, rowIndex: i }))

      const rowLength = data.length

      if (rowLength > rowNum && rowLength < 2 * rowNum) {
        data = [...data, ...data]
      }

      data = data.map((d, i) => ({ ...d, scroll: i }))

      this.rowsData = data
      this.rows = data
    },
    calcWidths () {
      const { width, mergedConfig, rowsData } = this

      const { columnWidth, header } = mergedConfig

      const usedWidth = columnWidth.reduce((all, w) => all + w, 0)

      let columnNum = 0
      if (rowsData[0]) {
        columnNum = rowsData[0].ceils.length
      } else if (header.length) {
        columnNum = header.length
      }

      const avgWidth = (width - usedWidth) / (columnNum - columnWidth.length)

      const widths = new Array(columnNum).fill(avgWidth)

      this.widths = deepMerge(widths, columnWidth)
    },
    calcHeights (onresize = false) {
      const { height, mergedConfig, header } = this

      const { headerHeight, rowNum, data } = mergedConfig

      let allHeight = height

      if (header.length) allHeight -= headerHeight

      const avgHeight = allHeight / rowNum

      this.avgHeight = avgHeight

      if (!onresize) this.heights = new Array(data.length).fill(avgHeight)
    },
    calcAligns () {
      const { header, mergedConfig } = this

      const columnNum = header.length

      let aligns = new Array(columnNum).fill('left')

      const { align } = mergedConfig

      this.aligns = deepMerge(aligns, align)
    },
    async animation (start = false) {
      const { needCalc, calcHeights, calcRowsData } = this

      if (needCalc) {
        calcRowsData()
        calcHeights()
        this.needCalc = false
      }

      let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this

      const { waitTime, carousel, rowNum } = mergedConfig

      const rowLength = rowsData.length

      if (rowNum >= rowLength) return

      if (start) {
        await new Promise(resolve => setTimeout(resolve, waitTime))
        if (updater !== this.updater) return
      }

      const animationNum = carousel === 'single' ? 1 : rowNum

      let rows = rowsData.slice(animationIndex)
      rows.push(...rowsData.slice(0, animationIndex))

      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
      this.heights = new Array(rowLength).fill(avgHeight)

      await new Promise(resolve => setTimeout(resolve, 300))
      if (updater !== this.updater) return

      this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))

      animationIndex += animationNum

      const back = animationIndex - rowLength
      if (back >= 0) animationIndex = back

      this.animationIndex = animationIndex
      this.animationHandler = setTimeout(animation, waitTime - 300)
    },
    stopAnimation () {
      const { animationHandler, updater } = this

      this.updater = (updater + 1) % 999999

      if (!animationHandler) return

      clearTimeout(animationHandler)
    },
    emitEvent (type, ri, ci, row, ceil) {
      const { ceils, rowIndex } = row

      this.$emit(type, {
        row: ceils,
        ceil,
        rowIndex,
        columnIndex: ci
      })
    },
    updateRows(rows, animationIndex) {
      const { mergedConfig, animationHandler, animation } = this

      this.mergedConfig = {
        ...mergedConfig,
        data: [...rows]
      }

      this.needCalc = true

      if (typeof animationIndex === 'number') this.animationIndex = animationIndex
      if (!animationHandler) animation(true)
    }
  },
  destroyed () {
    const { stopAnimation } = this

    stopAnimation()
  }
}
</script>

================================================
FILE: lib/components/scrollRankingBoard/index.js
================================================
import './src/main.css'
import ScrollRankingBoard from './src/main.vue'

export default function (Vue) {
  Vue.component(ScrollRankingBoard.name, ScrollRankingBoard)
}


================================================
FILE: lib/components/scrollRankingBoard/src/main.css
================================================
.dv-scroll-ranking-board {
  width: 100%;
  height: 100%;
  color: #fff;
  overflow: hidden;
}
.dv-scroll-ranking-board .row-item {
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.dv-scroll-ranking-board .ranking-info {
  display: flex;
  width: 100%;
  font-size: 13px;
}
.dv-scroll-ranking-board .ranking-info .rank {
  width: 40px;
  color: #1370fb;
}
.dv-scroll-ranking-board .ranking-info .info-name {
  flex: 1;
}
.dv-scroll-ranking-board .ranking-column {
  border-bottom: 2px solid rgba(19, 112, 251, 0.5);
  margin-top: 5px;
}
.dv-scroll-ranking-board .ranking-column .inside-column {
  position: relative;
  height: 6px;
  background-color: #1370fb;
  margin-bottom: 2px;
  border-radius: 1px;
  overflow: hidden;
}
.dv-scroll-ranking-board .ranking-column .shine {
  position: absolute;
  left: 0%;
  top: 2px;
  height: 2px;
  width: 50px;
  transform: translateX(-100%);
  background: radial-gradient(#28f8ff 5%, transparent 80%);
  animation: shine 3s ease-in-out infinite alternate;
}
@keyframes shine {
  80% {
    left: 0%;
    transform: translateX(-100%);
  }
  100% {
    left: 100%;
    transform: translateX(0%);
  }
}


================================================
FILE: lib/components/scrollRankingBoard/src/main.vue
================================================
<template>
  <div class="dv-scroll-ranking-board" :ref="ref">
    <div
      class="row-item"
      v-for="(item, i) in rows"
      :key="item.toString() + item.scroll"
      :style="`height: ${heights[i]}px;`"
    >
      <div class="ranking-info">
        <div class="rank">No.{{ item.ranking }}</div>
        <div class="info-name" v-html="item.name" />
        <div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
      </div>

      <div class="ranking-column">
        <div
          class="inside-column"
          :style="`width: ${item.percent}%;`"
        >
          <div class="shine" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvScrollRankingBoard',
  mixins: [autoResize],
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      ref: 'scroll-ranking-board',

      defaultConfig: {
        /**
         * @description Board data
         * @type {Array<Object>}
         * @default data = []
         */
        data: [],
        /**
         * @description Row num
         * @type {Number}
         * @default rowNum = 5
         */
        rowNum: 5,
        /**
         * @description Scroll wait time
         * @type {Number}
         * @default waitTime = 2000
         */
        waitTime: 2000,
        /**
         * @description Carousel type
         * @type {String}
         * @default carousel = 'single'
         * @example carousel = 'single' | 'page'
         */
        carousel: 'single',
        /**
         * @description Value unit
         * @type {String}
         * @default unit = ''
         * @example unit = 'ton'
         */
        unit: '',
        /**
         * @description Auto sort by value
         * @type {Boolean}
         * @default sort = true
         */
        sort: true,
        /**
         * @description Value formatter
         * @type {Function}
         * @default valueFormatter = null
         */
        valueFormatter: null
      },

      mergedConfig: null,

      rowsData: [],

      rows: [],

      heights: [],

      animationIndex: 0,

      animationHandler: '',

      updater: 0
    }
  },
  watch: {
    config () {
      const { stopAnimation, calcData } = this

      stopAnimation()

      calcData()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcData } = this

      calcData()
    },
    onResize () {
      const { mergedConfig, calcHeights } = this

      if (!mergedConfig) return

      calcHeights(true)
    },
    calcData () {
      const { mergeConfig, calcRowsData } = this

      mergeConfig()

      calcRowsData()

      const { calcHeights } = this

      calcHeights()

      const { animation } = this

      animation(true)
    },
    mergeConfig () {
      let { config, defaultConfig } = this

      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
    },
    calcRowsData () {
      let { data, rowNum, sort } = this.mergedConfig

      sort && data.sort(({ value: a }, { value: b }) => {
        if (a > b) return -1
        if (a < b) return 1
        if (a === b) return 0
      })

      const value = data.map(({ value }) => value)
      
      const min = Math.min(...value) || 0

      // abs of min
      const minAbs = Math.abs(min)

      const max = Math.max(...value) || 0

      // abs of max
      const maxAbs = Math.abs(max)

      const total = max + minAbs

      data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: (row.value + minAbs) / total * 100 }))

      const rowLength = data.length

      if (rowLength > rowNum && rowLength < 2 * rowNum) {
        data = [...data, ...data]
      }

      data = data.map((d, i) => ({ ...d, scroll: i }))

      this.rowsData = data
      this.rows = data
    },
    calcHeights (onresize = false) {
      const { height, mergedConfig } = this

      const { rowNum, data } = mergedConfig

      const avgHeight = height / rowNum

      this.avgHeight = avgHeight

      if (!onresize) this.heights = new Array(data.length).fill(avgHeight)
    },
    async animation (start = false) {
      let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this

      const { waitTime, carousel, rowNum } = mergedConfig

      const rowLength = rowsData.length

      if (rowNum >= rowLength) return

      if (start) {
        await new Promise(resolve => setTimeout(resolve, waitTime))
        if (updater !== this.updater) return
      }

      const animationNum = carousel === 'single' ? 1 : rowNum

      let rows = rowsData.slice(animationIndex)
      rows.push(...rowsData.slice(0, animationIndex))

      this.rows = rows.slice(0, rowNum + 1)
      this.heights = new Array(rowLength).fill(avgHeight)

      await new Promise(resolve => setTimeout(resolve, 300))
      if (updater !== this.updater) return

      this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))

      animationIndex += animationNum

      const back = animationIndex - rowLength
      if (back >= 0) animationIndex = back

      this.animationIndex = animationIndex
      this.animationHandler = setTimeout(animation, waitTime - 300)
    },
    stopAnimation () {
      const { animationHandler, updater } = this

      this.updater = (updater + 1) % 999999

      if (!animationHandler) return

      clearTimeout(animationHandler)
    },
  },
  destroyed () {
    const { stopAnimation } = this

    stopAnimation()
  }
}
</script>

================================================
FILE: lib/components/waterLevelPond/index.js
================================================
import './src/main.css'
import WaterLevelPond from './src/main.vue'

export default function (Vue) {
  Vue.component(WaterLevelPond.name, WaterLevelPond)
}


================================================
FILE: lib/components/waterLevelPond/src/main.css
================================================
.dv-water-pond-level {
  position: relative;
}
.dv-water-pond-level svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.dv-water-pond-level text {
  font-size: 25px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: middle;
}
.dv-water-pond-level ellipse,
.dv-water-pond-level rect {
  fill: none;
  stroke-width: 3;
}
.dv-water-pond-level canvas {
  margin-top: 8px;
  margin-left: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  box-sizing: border-box;
}


================================================
FILE: lib/components/waterLevelPond/src/main.vue
================================================
<template>
  <div class="dv-water-pond-level">
    <svg v-if="renderer">
      <defs>
        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop v-for="lc in svgBorderGradient" :key="lc[0]"
            :offset="lc[0]"
            :stop-color="lc[1]" />
        </linearGradient>
      </defs>

      <text
        v-if="renderer"
        :stroke="`url(#${gradientId})`"
        :fill="`url(#${gradientId})`"
        :x="renderer.area[0] / 2 + 8"
        :y="renderer.area[1] / 2 + 8"
      >
        {{ details }}
      </text>

      <ellipse v-if="!shape || shape === 'round'"
        :cx="renderer.area[0] / 2 + 8"
        :cy="renderer.area[1] / 2 + 8"
        :rx="renderer.area[0] / 2 + 5"
        :ry="renderer.area[1] / 2 + 5"
        :stroke="`url(#${gradientId})`" />

      <rect v-else
        x="2" y="2"
        :rx="shape === 'roundRect' ? 10 : 0"
        :ry="shape === 'roundRect' ? 10 : 0"
        :width="renderer.area[0] + 12"
        :height="renderer.area[1] + 12"
        :stroke="`url(#${gradientId})`" />
    </svg>

    <canvas ref="water-pond-level" :style="`border-radius: ${radius};`" />
  </div>
</template>

<script>
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import CRender from '@jiaminghi/c-render'

export default {
  name: 'DvWaterLevelPond',
  props: {
    config: Object,
    default: () => ({})
  },
  data () {
    const id = uuid()
    return {
      gradientId: `water-level-pond-${id}`,

      defaultConfig: {
        /**
         * @description Data
         * @type {Array<Number>}
         * @default data = []
         * @example data = [60, 40]
         */
        data: [],
        /**
         * @description Shape of wanter level pond
         * @type {String}
         * @default shape = 'rect'
         * @example shape = 'rect' | 'roundRect' | 'round'
         */
        shape: 'rect',
        /**
         * @description Water wave number
         * @type {Number}
         * @default waveNum = 3
         */
        waveNum: 3,
        /**
         * @description Water wave height (px)
         * @type {Number}
         * @default waveHeight = 40
         */
        waveHeight: 40,
        /**
         * @description Wave opacity
         * @type {Number}
         * @default waveOpacity = 0.4
         */
        waveOpacity: 0.4,
        /**
         * @description Colors (hex|rgb|rgba|color keywords)
         * @type {Array<String>}
         * @default colors = ['#00BAFF', '#3DE7C9']
         * @example colors = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
         */
        colors: ['#3DE7C9', '#00BAFF'],
        /**
         * @description Formatter
         * @type {String}
         * @default formatter = '{value}%'
         */
        formatter: '{value}%'
      },

      mergedConfig: {},

      renderer: null,

      svgBorderGradient: [],

      details: '',

      waves: [],

      animation: false
    }
  },
  computed: {
    radius () {
      const { shape } = this.mergedConfig

      if (shape === 'round') return '50%'

      if (shape === 'rect') return '0'

      if (shape === 'roundRect') return '10px'

      return '0'
    },
    shape () {
      const { shape } = this.mergedConfig

      if (!shape) return 'rect'

      return shape
    }
  },
  watch: {
    config () {
      const { calcData, renderer } = this

      renderer.delAllGraph()

      this.waves = []

      setTimeout(calcData, 0)
    }
  },
  methods: {
    init () {
      const { initRender, config, calcData } = this

      initRender()

      if (!config) return

      calcData()
    },
    initRender () {
      const { $refs } = this

      this.renderer = new CRender($refs['water-pond-level'])
    },
    calcData () {
      const { mergeConfig, calcSvgBorderGradient, calcDetails } = this

      mergeConfig()

      calcSvgBorderGradient()

      calcDetails()

      const { addWave, animationWave } = this

      addWave()

      animationWave()
    },
    mergeConfig () {
      const { config, defaultConfig } = this

      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config)
    },
    calcSvgBorderGradient () {
      const { colors } = this.mergedConfig

      const colorNum = colors.length

      const colorOffsetGap = 100 / (colorNum - 1)

      this.svgBorderGradient = colors.map((c, i) => [colorOffsetGap * i, c])
    },
    calcDetails () {
      const { data, formatter } = this.mergedConfig

      if (!data.length) {
        this.details = ''

        return
      }

      const maxValue = Math.max(...data)

      this.details = formatter.replace('{value}', maxValue)
    },
    addWave () {
      const { renderer, getWaveShapes, getWaveStyle, drawed } = this

      const shapes = getWaveShapes()
      const style = getWaveStyle()

      this.waves = shapes.map(shape => renderer.add({
        name: 'smoothline',
        animationFrame: 300,
        shape,
        style,
        drawed
      }))
    },
    getWaveShapes () {
      const { mergedConfig, renderer, mergeOffset } = this

      const { waveNum, waveHeight, data } = mergedConfig

      const [w, h] = renderer.area

      const pointsNum = waveNum * 4 + 4

      const pointXGap = w / waveNum / 2

      return data.map(v => {
        let points = new Array(pointsNum).fill(0).map((foo, j) => {
          const x = w - pointXGap * j

          const startY = (1 - v / 100) * h

          const y = j % 2 === 0 ? startY : startY - waveHeight

          return [x, y]
        })

        points = points.map(p => mergeOffset(p, [pointXGap * 2, 0]))

        return { points }
      })
    },
    mergeOffset ([x, y], [ox, oy]) {
      return [x + ox, y + oy]
    },
    getWaveStyle () {
      const { renderer, mergedConfig } = this

      const h = renderer.area[1]

      return {
        gradientColor: mergedConfig.colors,
        gradientType: 'linear',
        gradientParams: [0, 0, 0, h],
        gradientWith: 'fill',
        opacity: mergedConfig.waveOpacity,
        translate: [0, 0]
      }
    },
    drawed ({ shape: { points } }, { ctx, area }) {
      const firstPoint = points[0]
      const lastPoint = points.slice(-1)[0]

      const h = area[1]

      ctx.lineTo(lastPoint[0], h)
      ctx.lineTo(firstPoint[0], h)

      ctx.closePath()

      ctx.fill()
    },
    async animationWave (repeat = 1) {
      const { waves, renderer, animation } = this

      if (animation) return

      this.animation = true

      const w = renderer.area[0]

      waves.forEach(graph => {
        graph.attr('style', { translate: [0, 0] })

        graph.animation('style', {
          translate: [w, 0]
        }, true)
      })

      await renderer.launchAnimation()

      this.animation = false

      if (!renderer.graphs.length) return

      this.animationWave(repeat + 1)
    }
  },
  mounted () {
    const { init } = this

    init()
  },
  beforeDestroy () {
    const { renderer } = this

    renderer.delAllGraph()

    this.waves = []
  }
}
</script>

================================================
FILE: lib/index.js
================================================
/**
 * EXPORT COMPONENTS
 */
export { default as activeRingChart } from './components/activeRingChart/index'
export { default as borderBox1 } from './components/borderBox1/index'
export { default as borderBox10 } from './components/borderBox10/index'
export { default as borderBox11 } from './components/borderBox11/index'
export { default as borderBox12 } from './components/borderBox12/index'
export { default as borderBox13 } from './components/borderBox13/index'
export { default as borderBox2 } from './components/borderBox2/index'
export { default as borderBox3 } from './components/borderBox3/index'
export { default as borderBox4 } from './components/borderBox4/index'
export { default as borderBox5 } from './components/borderBox5/index'
export { default as borderBox6 } from './components/borderBox6/index'
export { default as borderBox7 } from './components/borderBox7/index'
export { default as borderBox8 } from './components/borderBox8/index'
export { default as borderBox9 } from './components/borderBox9/index'
export { default as capsuleChart } from './components/capsuleChart/index'
export { default as charts } from './components/charts/index'
export { default as conicalColumnChart } from './components/conicalColumnChart/index'
export { default as decoration1 } from './components/decoration1/index'
export { default as decoration10 } from './components/decoration10/index'
export { default as decoration11 } from './components/decoration11/index'
export { default as decoration12 } from './components/decoration12/index'
export { default as decoration2 } from './components/decoration2/index'
export { default as decoration3 } from './components/decoration3/index'
export { default as decoration4 } from './components/decoration4/index'
export { default as decoration5 } from './components/decoration5/index'
export { default as decoration6 } from './components/decoration6/index'
export { default as decoration7 } from './components/decoration7/index'
export { default as decoration8 } from './components/decoration8/index'
export { default as decoration9 } from './components/decoration9/index'
export { default as digitalFlop } from './components/digitalFlop/index'
export { default as flylineChart } from './components/flylineChart/index'
export { default as flylineChartEnhanced } from './components/flylineChartEnhanced/index'
export { default as fullScreenContainer } from './components/fullScreenContainer/index'
export { default as loading } from './components/loading/index'
export { default as percentPond } from './components/percentPond/index'
export { default as scrollBoard } from './components/scrollBoard/index'
export { default as scrollRankingBoard } from './components/scrollRankingBoard/index'
export { default as waterLevelPond } from './components/waterLevelPond/index'
/**
 * IMPORT COMPONENTS
 */
import fullScreenContainer from './components/fullScreenContainer/index'
import loading from './components/loading/index'

// border box
import borderBox1 from './components/borderBox1/index'
import borderBox2 from './components/borderBox2/index'
import borderBox3 from './components/borderBox3/index'
import borderBox4 from './components/borderBox4/index'
import borderBox5 from './components/borderBox5/index'
import borderBox6 from './components/borderBox6/index'
import borderBox7 from './components/borderBox7/index'
import borderBox8 from './components/borderBox8/index'
import borderBox9 from './components/borderBox9/index'
import borderBox10 from './components/borderBox10/index'
import borderBox11 from './components/borderBox11/index'
import borderBox12 from './components/borderBox12/index'
import borderBox13 from './components/borderBox13/index'

// decoration
import decoration1 from './components/decoration1/index'
import decoration2 from './components/decoration2/index'
import decoration3 from './components/decoration3/index'
import decoration4 from './components/decoration4/index'
import decoration5 from './components/decoration5/index'
import decoration6 from './components/decoration6/index'
import decoration7 from './components/decoration7/index'
import decoration8 from './components/decoration8/index'
import decoration9 from './components/decoration9/index'
import decoration10 from './components/decoration10/index'
import decoration11 from './components/decoration11/index'
import decoration12 from './components/decoration12/index'

// charts
import charts from './components/charts/index'

import activeRingChart from './components/activeRingChart'
import capsuleChart from './components/capsuleChart'
import waterLevelPond from './components/waterLevelPond/index'
import percentPond from './components/percentPond/index'
import flylineChart from './components/flylineChart'
import flylineChartEnhanced from './components/flylineChartEnhanced'
import conicalColumnChart from './components/conicalColumnChart'
import digitalFlop from './components/digitalFlop'
import scrollBoard from './components/scrollBoard/index'
import scrollRankingBoard from './components/scrollRankingBoard/index'

/**
 * USE COMPONENTS
 */
export default function (Vue) {
  Vue.use(fullScreenContainer)
  Vue.use(loading)

  // border box
  Vue.use(borderBox1)
  Vue.use(borderBox2)
  Vue.use(borderBox3)
  Vue.use(borderBox4)
  Vue.use(borderBox5)
  Vue.use(borderBox6)
  Vue.use(borderBox7)
  Vue.use(borderBox8)
  Vue.use(borderBox9)
  Vue.use(borderBox10)
  Vue.use(borderBox11)
  Vue.use(borderBox12)
  Vue.use(borderBox13)

  // decoration
  Vue.use(decoration1)
  Vue.use(decoration2)
  Vue.use(decoration3)
  Vue.use(decoration4)
  Vue.use(decoration5)
  Vue.use(decoration6)
  Vue.use(decoration7)
  Vue.use(decoration8)
  Vue.use(decoration9)
  Vue.use(decoration10)
  Vue.use(decoration11)
  Vue.use(decoration12)

  // charts
  Vue.use(charts)

  Vue.use(activeRingChart)
  Vue.use(capsuleChart)
  Vue.use(waterLevelPond)
  Vue.use(percentPond)
  Vue.use(flylineChart)
  Vue.use(flylineChartEnhanced)
  Vue.use(conicalColumnChart)
  Vue.use(digitalFlop)
  Vue.use(scrollBoard)
  Vue.use(scrollRankingBoard)
}


================================================
FILE: lib/mixin/autoResize.js
================================================
import { debounce, observerDomResize } from '../util/index'

export default {
  data () {
    return {
      dom: '',

      width: 0,
      height: 0,

      debounceInitWHFun: '',

      domObserver: ''
    }
  },
  methods: {
    async autoResizeMixinInit () {
      const { initWH, getDebounceInitWHFun, bindDomResizeCallback, afterAutoResizeMixinInit } = this

      await initWH(false)

      getDebounceInitWHFun()

      bindDomResizeCallback()

      if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit()
    },
    initWH (resize = true) {
      const { $nextTick, $refs, ref, onResize } = this

      return new Promise(resolve => {
        $nextTick(_ => {
          const dom = this.dom = $refs[ref]

          this.width = dom ? dom.clientWidth : 0
          this.height = dom ? dom.clientHeight : 0

          if (!dom) {
            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
          } else if (!this.width || !this.height) {
            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
          }

          if (typeof onResize === 'function' && resize) onResize()

          resolve()
        })
      })
    },
    getDebounceInitWHFun () {
      const { initWH } = this

      this.debounceInitWHFun = debounce(100, initWH)
    },
    bindDomResizeCallback () {
      const { dom, debounceInitWHFun } = this

      this.domObserver = observerDomResize(dom, debounceInitWHFun)

      window.addEventListener('resize', debounceInitWHFun)
    },
    unbindDomResizeCallback () {
      let { domObserver, debounceInitWHFun } = this

      if (!domObserver) return

      domObserver.disconnect()
      domObserver.takeRecords()
      domObserver = null

      window.removeEventListener('resize', debounceInitWHFun)
    }
  },
  mounted () {
    const { autoResizeMixinInit } = this

    autoResizeMixinInit()
  },
  beforeDestroy () {
    const { unbindDomResizeCallback } = this

    unbindDomResizeCallback()
  }
}


================================================
FILE: lib/util/index.js
================================================
export function randomExtend (minNum, maxNum) {
  if (arguments.length === 1) {
    return parseInt(Math.random() * minNum + 1, 10)
  } else {
    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
  }
}

export function debounce (delay, callback) {
  let lastTime

  return function () {
    clearTimeout(lastTime)

    const [that, args] = [this, arguments]

    lastTime = setTimeout(() => {
      callback.apply(that, args)
    }, delay)
  }
}

export function observerDomResize (dom, callback) {
  const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

  const observer = new MutationObserver(callback)

  observer.observe(dom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })

  return observer
}

export function getPointDistance (pointOne, pointTwo) {
  const minusX = Math.abs(pointOne[0] - pointTwo[0])

  const minusY = Math.abs(pointOne[1] - pointTwo[1])

  return Math.sqrt(minusX * minusX + minusY * minusY)
}

export function uuid (hasHyphen) {
  return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
		const r = Math.random() * 16 | 0
		const v = c == 'x' ? r : (r & 0x3 | 0x8)
		return v.toString(16)
  })
}


================================================
FILE: package.json
================================================
{
  "name": "@jiaminghi/data-view",
  "version": "2.10.0",
  "author": "JiaMing <743192023@qq.com>",
  "description": "Vue Large screen data display component library",
  "main": "lib/index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/DataV-Team/DataV.git"
  },
  "scripts": {
    "build": "node build/index.js",
    "prepublish": "npm run build",
    "deploy": "node deploy/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/DataV-Team/DataV/issues"
  },
  "keywords": [
    "vue",
    "chart",
    "dataview",
    "datavisual"
  ],
  "dependencies": {
    "@jiaminghi/charts": "*",
    "@babel/runtime": "^7.5.5"
  },
  "homepage": "https://github.com/DataV-Team/DataV#readme",
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@jiaminghi/fs": "0.0.1",
    "ftp": "^0.3.10",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-terser": "^5.1.1",
    "rollup-plugin-vue": "^5.0.1",
    "vue-template-compiler": "^2.6.10"
  }
}


================================================
FILE: src/components/activeRingChart/index.js
================================================
import ActiveRingChart from './src/main.vue'

export default function (Vue) {
  Vue.component(ActiveRingChart.name, ActiveRingChart)
}


================================================
FILE: src/components/activeRingChart/src/main.vue
================================================
<template>
  <div class="dv-active-ring-chart">
    <div class="active-ring-chart-container" ref="active-ring-chart" />
    <div class="active-ring-info">
      <dv-digital-flop :config="digitalFlop" />
      <div class="active-ring-name" :style="fontSize">{{ ringName }}</div>
    </div>
  </div>
</template>

<script>
import Charts from '@jiaminghi/charts'

import dvDigitalFlop from '../../digitalFlop/src/main.vue'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvActiveRingChart',
  components: {
    dvDigitalFlop
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      defaultConfig: {
        /**
         * @description Ring radius
         * @type {String|Number}
         * @default radius = '50%'
         * @example radius = '50%' | 100
         */
        radius: '50%',
        /**
         * @description Active ring radius
         * @type {String|Number}
         * @default activeRadius = '55%'
         * @example activeRadius = '55%' | 110
         */
        activeRadius: '55%',
        /**
         * @description Ring data
         * @type {Array<Object>}
         * @default data = [{ name: '', value: 0 }]
         */
        data: [{ name: '', value: 0 }],
        /**
         * @description Ring line width
         * @type {Number}
         * @default lineWidth = 20
         */
        lineWidth: 20,
        /**
         * @description Active time gap (ms)
         * @type {Number}
         * @default activeTimeGap = 3000
         */
        activeTimeGap: 3000,
        /**
         * @description Ring color (hex|rgb|rgba|color keywords)
         * @type {Array<String>}
         * @default color = [Charts Default Color]
         * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
         */
        color: [],
        /**
         * @description Digital flop style
         * @type {Object}
         */
        digitalFlopStyle: {
          fontSize: 25,
          fill: '#fff'
        },
        /**
         * @description Digital flop toFixed
         * @type {Number}
         */
        digitalFlopToFixed: 0,
        /**
         * @description Digital flop unit
         * @type {String}
         */
        digitalFlopUnit: '',
        /**
         * @description CRender animationCurve
         * @type {String}
         * @default animationCurve = 'easeOutCubic'
         */
        animationCurve: 'easeOutCubic',
        /**
         * @description CRender animationFrame
         * @type {String}
         * @default animationFrame = 50
         */
        animationFrame: 50,
        /**
         * @description showOriginValue
         * @type {Boolean}
         * @default showOriginValue = false
         */
        showOriginValue: false
      },

      mergedConfig: null,

      chart: null,

      activeIndex: 0,

      animationHandler: ''
    }
  },
  computed: {
    digitalFlop() {
      const { mergedConfig, activeIndex } = this

      if (!mergedConfig) return {}

      const {
        digitalFlopStyle,
        digitalFlopToFixed,
        data,
        showOriginValue,
        digitalFlopUnit
      } = mergedConfig

      const value = data.map(({ value }) => value)

      let displayValue

      if (showOriginValue) {
        displayValue = value[activeIndex]
      } else {
        const sum = value.reduce((all, v) => all + v, 0)

        const percent = parseFloat((value[activeIndex] / sum) * 100) || 0

        displayValue = percent
      }

      return {
        content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
        number: [displayValue],
        style: digitalFlopStyle,
        toFixed: digitalFlopToFixed
      }
    },
    ringName() {
      const { mergedConfig, activeIndex } = this

      if (!mergedConfig) return ''

      return mergedConfig.data[activeIndex].name
    },
    fontSize() {
      const { mergedConfig } = this

      if (!mergedConfig) return ''

      return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`
    }
  },
  watch: {
    config() {
      const { animationHandler, mergeConfig, setRingOption } = this

      clearTimeout(animationHandler)

      this.activeIndex = 0

      mergeConfig()

      setRingOption()
    }
  },
  methods: {
    init() {
      const { initChart, mergeConfig, setRingOption } = this

      initChart()

      mergeConfig()

      setRingOption()
    },
    initChart() {
      const { $refs } = this

      this.chart = new Charts($refs['active-ring-chart'])
    },
    mergeConfig() {
      const { defaultConfig, config } = this

      this.mergedConfig = deepMerge(
        deepClone(defaultConfig, true),
        config || {}
      )
    },
    setRingOption() {
      const { getRingOption, chart, ringAnimation } = this

      const option = getRingOption()

      chart.setOption(option, true)

      ringAnimation()
    },
    getRingOption() {
      const { mergedConfig, getRealRadius } = this

      const radius = getRealRadius()

      mergedConfig.data.forEach(dataItem => {
        dataItem.radius = radius
      })

      return {
        series: [
          {
            type: 'pie',
            ...mergedConfig,
            outsideLabel: {
              show: false
            }
          }
        ],
        color: mergedConfig.color
      }
    },
    getRealRadius(active = false) {
      const { mergedConfig, chart } = this

      const { radius, activeRadius, lineWidth } = mergedConfig

      const maxRadius = Math.min(...chart.render.area) / 2

      const halfLineWidth = lineWidth / 2

      let realRadius = active ? activeRadius : radius

      if (typeof realRadius !== 'number')
        realRadius = (parseInt(realRadius) / 100) * maxRadius

      const insideRadius = realRadius - halfLineWidth
      const outSideRadius = realRadius + halfLineWidth

      return [insideRadius, outSideRadius]
    },
    ringAnimation() {
      let { activeIndex, getRingOption, chart, getRealRadius } = this

      const radius = getRealRadius()
      const active = getRealRadius(true)

      const option = getRingOption()

      const { data } = option.series[0]

      data.forEach((dataItem, i) => {
        if (i === activeIndex) {
          dataItem.radius = active
        } else {
          dataItem.radius = radius
        }
      })

      chart.setOption(option, true)

      const { activeTimeGap } = option.series[0]

      this.animationHandler = setTimeout(foo => {
        activeIndex += 1

        if (activeIndex >= data.length) activeIndex = 0

        this.activeIndex = activeIndex

        this.ringAnimation()
      }, activeTimeGap)
    }
  },
  mounted() {
    const { init } = this

    init()
  },
  beforeDestroy() {
    const { animationHandler } = this

    clearTimeout(animationHandler)
  }
}
</script>

<style lang="less">
.dv-active-ring-chart {
  position: relative;

  .active-ring-chart-container {
    width: 100%;
    height: 100%;
  }

  .active-ring-info {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .dv-digital-flop {
      width: 100px;
      height: 30px;
    }

    .active-ring-name {
      width: 100px;
      height: 30px;
      color: #fff;
      text-align: center;
      vertical-align: middle;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
</style>


================================================
FILE: src/components/borderBox1/index.js
================================================
import BorderBox1 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox1.name, BorderBox1)
}


================================================
FILE: src/components/borderBox1/src/main.vue
================================================
<template>
  <div class="dv-border-box-1" :ref="ref">
    <svg class="border" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
      38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
      85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
      ${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
      ${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
      ${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
      ${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
      ${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
    </svg>

    <svg
      width="150px"
      height="150px"
      :key="item"
      v-for="item in border"
      :class="`${item} border`"
    >
      <polygon
        :fill="mergedColor[0]"
        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
      >
        <animate
          attributeName="fill"
          :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
          dur="0.5s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>
      <polygon
        :fill="mergedColor[1]"
        points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
      >
        <animate
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
          dur="0.5s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>
      <polygon
        :fill="mergedColor[0]"
        points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
      >
        <animate
          attributeName="fill"
          :values="`${mergedColor[0]};${mergedColor[1]};transparent`"
          dur="1s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox1',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-1',

      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],

      defaultColor: ['#4fd2dd', '#235fa7'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-border-box-1 {
  position: relative;
  width: 100%;
  height: 100%;

  .border {
    position: absolute;
    display: block;
  }

  .right-top {
    right: 0px;
    transform: rotateY(180deg);
  }

  .left-bottom {
    bottom: 0px;
    transform: rotateX(180deg);
  }

  .right-bottom {
    right: 0px;
    bottom: 0px;
    transform: rotateX(180deg) rotateY(180deg);
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/borderBox10/index.js
================================================
import BorderBox10 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox10.name, BorderBox10)
}


================================================
FILE: src/components/borderBox10/src/main.vue
================================================
<template>
  <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
        4, ${height} 0, ${height - 4} 0, 4
      `" />
    </svg>

    <svg
      width="150px"
      height="150px"
      :key="item"
      v-for="item in border"
      :class="`${item} dv-border-svg-container`"
    >
      <polygon
        :fill="mergedColor[1]"
        points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
      />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox10',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-10',

      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],

      defaultColor: ['#1d48c4', '#d3e1f8'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-border-box-10 {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;

  .dv-border-svg-container {
    position: absolute;
    display: block;
  }

  .right-top {
    right: 0px;
    transform: rotateY(180deg);
  }

  .left-bottom {
    bottom: 0px;
    transform: rotateX(180deg);
  }

  .right-bottom {
    right: 0px;
    bottom: 0px;
    transform: rotateX(180deg) rotateY(180deg);
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/borderBox11/index.js
================================================
import BorderBox11 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox11.name, BorderBox11)
}


================================================
FILE: src/components/borderBox11/src/main.vue
================================================
<template>
  <div class="dv-border-box-11" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <defs>
        <filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
          <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
          <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
          <feFlood :flood-color="mergedColor[1]" result="glowColor" />
          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
          <feMerge>
            <feMergeNode in="softGlowColored"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>

      <polygon :fill="backgroundColor" :points="`
        20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
        ${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
        ${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
        20, ${height - 8} 8, ${height - 25} 8, 50
      `" />

      <polyline
        :stroke="mergedColor[0]"
        :filter="`url(#${filterId})`"
        :points="`
          ${(width - titleWidth) / 2}, 30
          20, 30 7, 50 7, ${50 + (height - 167) / 2}
          13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
          7, ${140 + (height - 167) / 2} 7, ${height - 27}
          20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
          ${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
          ${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
          ${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
          ${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
          ${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
          ${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
        `"
      />

      <polygon
        :stroke="mergedColor[0]"
        fill="transparent"
        :points="`
          ${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
          ${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
        `"
      />

      <polygon
        :stroke="mergedColor[0]"
        fill="transparent"
        :points="`
          ${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
          ${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
        `"
      />

      <polygon
        :stroke="mergedColor[0]"
        :fill="fade(mergedColor[1] || defaultColor[1], 30)"
        :filter="`url(#${filterId})`"
        :points="`
          ${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
          ${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
          ${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
        `"
      />

      <polygon
        :filter="`url(#${filterId})`"
        :fill="mergedColor[0]"
        opacity="1"
        :points="`
          ${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
          ${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
        `"
      >
        <animate
          attributeName="opacity"
          values="1;0.7;1"
          dur="2s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>


      <polygon
        :filter="`url(#${filterId})`"
        :fill="mergedColor[0]"
        opacity="0.7"
        :points="`
          ${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
          ${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
        `"
      >
        <animate
          attributeName="opacity"
          values="0.7;0.4;0.7"
          dur="2s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>

      <polygon
        :filter="`url(#${filterId})`"
        :fill="mergedColor[0]"
        opacity="0.5"
        :points="`
          ${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
          ${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
        `"
      >
        <animate
          attributeName="opacity"
          values="0.5;0.2;0.5"
          dur="2s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>

      <polygon
        :filter="`url(#${filterId})`"
        :fill="mergedColor[0]"
        opacity="1"
        :points="`
          ${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
          ${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
        `"
      >
        <animate
          attributeName="opacity"
          values="1;0.7;1"
          dur="2s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>

      <polygon
        :filter="`url(#${filterId})`"
        :fill="mergedColor[0]"
        opacity="0.7"
        :points="`
          ${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
          ${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
        `"
      >
        <animate
          attributeName="opacity"
          values="0.7;0.4;0.7"
          dur="2s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>

      <polygon
        :filter="`url(#${filterId})`"
        :fill="mergedColor[0]"
        opacity="0.5"
        :points="`
          ${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
          ${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
        `"
      >
        <animate
          attributeName="opacity"
          values="0.5;0.2;0.5"
          dur="2s"
          begin="0s"
          repeatCount="indefinite"
        />
      </polygon>

      <text
        class="dv-border-box-11-title"
        :x="`${width / 2}`"
        y="32"
        fill="#fff"
        font-size="18"
        text-anchor="middle"
        dominant-baseline="middle"
      >
        {{ title }}
      </text>

      <polygon
        :fill="mergedColor[0]"
        :filter="`url(#${filterId})`"
        :points="`
          7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
          11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
        `"
      />

      <polygon
        :fill="mergedColor[0]"
        :filter="`url(#${filterId})`"
        :points="`
          ${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
          ${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
        `"
      />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import { fade } from '@jiaminghi/color'

export default {
  name: 'DvBorderBox11',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    titleWidth: {
      type: Number,
      default: 250
    },
    title: {
      type: String,
      default: ''
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'border-box-11',
      filterId: `border-box-11-filterId-${id}`,

      defaultColor: ['#8aaafb', '#1f33a2'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    },
    fade
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-border-box-11 {
  position: relative;
  width: 100%;
  height: 100%;

  .dv-border-svg-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;

    & > polyline {
      fill: none;
      stroke-width: 1;
    }
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/borderBox12/index.js
================================================
import BorderBox12 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox12.name, BorderBox12)
}


================================================
FILE: src/components/borderBox12/src/main.vue
================================================
<template>
  <div class="dv-border-box-12" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <defs>
        <filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
          <feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken" />
          <feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
          <feFlood :flood-color="fade(mergedColor[1] || defaultColor[1], 70)" result="glowColor">
            <animate
              attributeName="flood-color"
              :values="`
                ${fade(mergedColor[1] || defaultColor[1], 70)};
                ${fade(mergedColor[1] || defaultColor[1], 30)};
                ${fade(mergedColor[1] || defaultColor[1], 70)};
              `"
              dur="3s"
              begin="0s"
              repeatCount="indefinite"
            />
          </feFlood>
          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
          <feMerge>
            <feMergeNode in="softGlowColored"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>

      <path
        v-if="width && height"
        :fill="backgroundColor"
        stroke-width="2"
        :stroke="mergedColor[0]"
        :d="`
          M15 5 L ${width - 15} 5 Q ${width - 5} 5, ${width - 5} 15
          L ${width - 5} ${height - 15} Q ${width - 5} ${height - 5}, ${width - 15} ${height - 5}
          L 15, ${height - 5} Q 5 ${height - 5} 5 ${height - 15} L 5 15
          Q 5 5 15 5
        `"
      />

      <path
        stroke-width="2"
        fill="transparent"
        stroke-linecap="round"
        :filter="`url(#${filterId})`"
        :stroke="mergedColor[1]"
        :d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`"
      />

      <path
        stroke-width="2"
        fill="transparent"
        stroke-linecap="round"
        :filter="`url(#${filterId})`"
        :stroke="mergedColor[1]"
        :d="`M ${width - 20} 5 L ${width - 15} 5 Q ${width - 5} 5 ${width - 5} 15 L ${width - 5} 20`"
      />

      <path
        stroke-width="2"
        fill="transparent"
        stroke-linecap="round"
        :filter="`url(#${filterId})`"
        :stroke="mergedColor[1]"
        :d="`
          M ${width - 20} ${height - 5} L ${width - 15} ${height - 5}
          Q ${width - 5} ${height - 5} ${width - 5} ${height - 15}
          L ${width - 5} ${height - 20}
        `"
      />

      <path
        stroke-width="2"
        fill="transparent"
        stroke-linecap="round"
        :filter="`url(#${filterId})`"
        :stroke="mergedColor[1]"
        :d="`
          M 20 ${height - 5} L 15 ${height - 5}
          Q 5 ${height - 5} 5 ${height - 15}
          L 5 ${height - 20}
        `"
      />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import { fade } from '@jiaminghi/color'

export default {
  name: 'DvBorderBox12',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'border-box-12',
      filterId: `borderr-box-12-filterId-${id}`,

      defaultColor: ['#2e6099', '#7ce7fd'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    },
    fade
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-border-box-12 {
  position: relative;
  width: 100%;
  height: 100%;

  .dv-border-svg-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/borderBox13/index.js
================================================
import BorderBox13 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox13.name, BorderBox13)
}


================================================
FILE: src/components/borderBox13/src/main.vue
================================================
<template>
  <div class="dv-border-box-13" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <path
        :fill="backgroundColor"
        :stroke="mergedColor[0]"
        :d="`
          M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
          L ${width - 20} 10 L ${width - 5} 25
          L ${width - 5} ${height - 5} L 20 ${height - 5}
          L 5 ${height - 20} L 5 20
        `"
      />

      <path
        fill="transparent"
        stroke-width="3"
        stroke-linecap="round"
        stroke-dasharray="10, 5"
        :stroke="mergedColor[0]"
        :d="`M 16 9 L 61 9`"
      />

      <path
        fill="transparent"
        :stroke="mergedColor[1]"
        :d="`M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`"
      />

      <path
        fill="transparent"
        :stroke="mergedColor[1]"
        :d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`"
      />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox13',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-13',

      defaultColor: ['#6586ec', '#2cf7fe'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-border-box-13 {
  position: relative;
  width: 100%;
  height: 100%;

  .dv-border-svg-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/borderBox2/index.js
================================================
import BorderBox2 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox2.name, BorderBox2)
}


================================================
FILE: src/components/borderBox2/src/main.vue
================================================
<template>
  <div class="dv-border-box-2" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
      `" />

      <polyline
        :stroke="mergedColor[0]"
        :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
      />
      <polyline
        :stroke="mergedColor[1]"
        :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
      />
      <circle :fill="mergedColor[0]" cx="11" cy="11" r="1" />
      <circle :fill="mergedColor[0]" :cx="width - 11" cy="11" r="1" />
      <circle :fill="mergedColor[0]" :cx="width - 11" :cy="height - 11" r="1" />
      <circle :fill="mergedColor[0]" cx="11" :cy="height - 11" r="1" />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox2',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-2',

      defaultColor: ['#fff', 'rgba(255, 255, 255, 0.6)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-border-box-2 {
  position: relative;
  width: 100%;
  height: 100%;

  .dv-border-svg-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;

    & > polyline {
      fill: none;
      stroke-width: 1;
    }
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/borderBox3/index.js
================================================
import BorderBox3 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox3.name, BorderBox3)
}


================================================
FILE: src/components/borderBox3/src/main.vue
================================================
<template>
  <div class="dv-border-box-3" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
      `" />

      <polyline class="dv-bb3-line1"
        :stroke="mergedColor[0]"
        :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
      />
      <polyline class="dv-bb3-line2"
        :stroke="mergedColor[1]"
        :points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`"
      />
      <polyline class="dv-bb3-line2"
        :stroke="mergedColor[1]"
        :points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`"
      />
      <polyline class="dv-bb3-line2"
        :stroke="mergedColor[1]"
        :points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
      />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox3',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-3',

      defaultColor: ['#2862b7', '#2862b7'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-border-box-3 {
  position: relative;
  width: 100%;
  height: 100%;

  .dv-border-svg-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;

    & > polyline {
      fill: none;
    }
  }

  .dv-bb3-line1 {
    stroke-width: 3;
  }

  .dv-bb3-line2 {
    stroke-width: 1;
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/borderBox4/index.js
================================================
import BorderBox4 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox4.name, BorderBox4)
}


================================================
FILE: src/components/borderBox4/src/main.vue
================================================
<template>
  <div class="dv-border-box-4" :ref="ref">
    <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        ${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
        16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
      `" />

      <polyline class="dv-bb4-line-1"
        :stroke="mergedColor[0]"
        :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
          10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"
      />
      <polyline
        :stroke="mergedColor[1]"
        class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
          14, ${height - 100}`"
      />

      <polyline class="dv-bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
      <polyline class="dv-bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
      <polyline class="dv-bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
      <polyline class="dv-bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
      <polyline class="dv-bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
      <polyline class="dv-bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
      <polyline class="dv-bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
      <polyline class="dv-bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox4',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    reverse: {
      type: Boolean,
      default: false
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-4',

      defaultColor: ['red', 'rgba(0,0,255,0.8)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-border-box-4 {
  position: relative;
  width: 100%;
  height: 100%;

  .dv-reverse {
    transform: rotate(180deg);
  }

  .dv-border-svg-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;

    & > polyline {
      fill: none;
    }
  }

  .sw1 {
    stroke-width: 1;
  }

  .sw3 {
    stroke-width: 3px;
    stroke-linecap: round;
  }

  .dv-bb4-line-1 {
    .sw1;
  }

  .dv-bb4-line-2 {
    .sw1;
  }

  .dv-bb4-line-3 {
    .sw3;
  }

  .dv-bb4-line-4 {
    .sw3;
  }

  .dv-bb4-line-5 {
    .sw1;
  }

  .dv-bb4-line-6 {
    .sw1;
  }

  .dv-bb4-line-7 {
    .sw1;
  }

  .dv-bb4-line-8 {
    .sw3;
  }

  .dv-bb4-line-9 {
    .sw3;
    stroke-dasharray: 100 250;
  }

  .dv-bb4-line-10 {
    .sw1;
    stroke-dasharray: 80 270;
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/borderBox5/index.js
================================================
import BorderBox5 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox5.name, BorderBox5)
}


================================================
FILE: src/components/borderBox5/src/main.vue
================================================
<template>
  <div class="dv-border-box-5" :ref="ref">
    <svg :class="`dv-border-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
      `" />

      <polyline
        class="dv-bb5-line-1"
        :stroke="mergedColor[0]"
        :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
          ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
      />
      <polyline
        class="dv-bb5-line-2"
        :stroke="mergedColor[1]"
        :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
          ${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
      />
      <polyline class="dv-bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
      <polyline class="dv-bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
      <polyline class="dv-bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
      <polyline class="dv-bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox5',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    reverse: {
      type: Boolean,
      default: false
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-5',

      defaultColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-border-box-5 {
  position: relative;
  width: 100%;
  height: 100%;

  .dv-reverse {
    transform: rotate(180deg);
  }

  .dv-border-svg-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    & > polyline {
      fill: none;
    }
  }

  .dv-bb5-line-1, .dv-bb5-line-2 {
    stroke-width: 1;
  }

  .dv-bb5-line-3, .dv-bb5-line-6 {
    stroke-width: 5;
  }

  .dv-bb5-line-4, .dv-bb5-line-5 {
    stroke-width: 2;
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/borderBox6/index.js
================================================
import BorderBox6 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox6.name, BorderBox6)
}


================================================
FILE: src/components/borderBox6/src/main.vue
================================================
<template>
  <div class="dv-border-box-6" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
      `" />

      <circle :fill="mergedColor[1]" cx="5" cy="5" r="2"/>
      <circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
      <circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
      <circle :fill="mergedColor[1]" cx="5" :cy="height - 5" r="2" />
      <polyline :stroke="mergedColor[0]" :points="`10, 4 ${width - 10}, 4`" />
      <polyline :stroke="mergedColor[0]" :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
      <polyline :stroke="mergedColor[0]" :points="`5, 70 5, ${height - 70}`" />
      <polyline :stroke="mergedColor[0]" :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
      <polyline :stroke="mergedColor[0]" :points="`3, 10, 3, 50`" />
      <polyline :stroke="mergedColor[0]" :points="`7, 30 7, 80`" />
      <polyline :stroke="mergedColor[0]" :points="`${width - 3}, 10 ${width - 3}, 50`" />
      <polyline :stroke="mergedColor[0]" :points="`${width - 7}, 30 ${width - 7}, 80`" />
      <polyline :stroke="mergedColor[0]" :points="`3, ${height - 10} 3, ${height - 50}`" />
      <polyline :stroke="mergedColor[0]" :points="`7, ${height - 30} 7, ${height - 80}`" />
      <polyline :stroke="mergedColor[0]" :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
      <polyline :stroke="mergedColor[0]" :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize.js'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox6',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-6',

      defaultColor: ['rgba(255, 255, 255, 0.35)', 'gray'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-border-box-6 {
  position: relative;
  width: 100%;
  height: 100%;

  .dv-border-svg-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    & > polyline {
      fill: none;
      stroke-width: 1;
    }
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/borderBox7/index.js
================================================
import BorderBox7 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox7.name, BorderBox7)
}


================================================
FILE: src/components/borderBox7/src/main.vue
================================================

<template>
  <div
    class="dv-border-box-7"
    :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
    :ref="ref"
  >
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />

      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, 10 0, 0 10, 0`" />
      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox7',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    return {
      ref: 'border-box-7',

      defaultColor: ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-border-box-7 {
  position: relative;
  width: 100%;
  height: 100%;

  .dv-border-svg-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    & > polyline {
      fill: none;
      stroke-linecap: round;
    }
  }

  .dv-bb7-line-width-2 {
    stroke-width: 2;
  }

  .dv-bb7-line-width-5 {
    stroke-width: 5;
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/borderBox8/index.js
================================================
import BorderBox8 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox8.name, BorderBox8)
}


================================================
FILE: src/components/borderBox8/src/main.vue
================================================
<template>
  <div class="dv-border-box-8" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <defs>
        <path
          :id="path"
          :d="pathD"
          fill="transparent"
        />
        <radialGradient
          :id="gradient"
          cx="50%" cy="50%" r="50%"
        >
          <stop
            offset="0%" stop-color="#fff"
            stop-opacity="1"
          />
          <stop
            offset="100%" stop-color="#fff"
            stop-opacity="0"
          />
        </radialGradient>

        <mask :id="mask">
          <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
            <animateMotion
              :dur="`${dur}s`"
              :path="pathD"
              rotate="auto"
              repeatCount="indefinite"
            />
          </circle>
        </mask>
      </defs>

      <polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />

      <use
        :stroke="mergedColor[0]"
        stroke-width="1"
        :xlink:href="`#${path}`"
      />

      <use
        :stroke="mergedColor[1]"
        stroke-width="3"
        :xlink:href="`#${path}`"
        :mask="`url(#${mask})`"
      >
        <animate
          attributeName="stroke-dasharray"
          :from="`0, ${length}`"
          :to="`${length}, 0`"
          :dur="`${dur}s`"
          repeatCount="indefinite"
        />
      </use>
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox8',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    dur: {
      type: Number,
      default: 3
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    },
    reverse: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'border-box-8',
      path: `border-box-8-path-${id}`,
      gradient: `border-box-8-gradient-${id}`,
      mask: `border-box-8-mask-${id}`,

      defaultColor: ['#235fa7', '#4fd2dd'],

      mergedColor: []
    }
  },
  computed: {
    length () {
      const { width, height } = this

      return (width + height - 5) * 2
    },
    pathD () {
      const { reverse, width, height } = this

      if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`

      return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-border-box-8 {
  position: relative;
  width: 100%;
  height: 100%;

  .dv-border-svg-container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/borderBox9/index.js
================================================
import BorderBox9 from './src/main.vue'

export default function (Vue) {
  Vue.component(BorderBox9.name, BorderBox9)
}


================================================
FILE: src/components/borderBox9/src/main.vue
================================================
<template>
  <div class="dv-border-box-9" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <defs>
        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
          <animate
            attributeName="x1"
            values="0%;100%;0%"
            dur="10s"
            begin="0s"
            repeatCount="indefinite"
          />

          <animate
            attributeName="x2"
            values="100%;0%;100%"
            dur="10s"
            begin="0s"
            repeatCount="indefinite"
          />

          <stop offset="0%" :stop-color="mergedColor[0]">
            <animate
              attributeName="stop-color"
              :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
              dur="10s"
              begin="0s"
              repeatCount="indefinite"
            />
          </stop>
          <stop offset="100%" :stop-color="mergedColor[1]">
            <animate
              attributeName="stop-color"
              :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
              dur="10s"
              begin="0s"
              repeatCount="indefinite"
            />
          </stop>
        </linearGradient>

        <mask :id="maskId">
          <polyline
            stroke="#fff"
            stroke-width="3"
            fill="transparent"
            :points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`"
          />
          <polyline
            fill="#fff"
            :points="
              `8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3
              ${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}
            `"
          />

          <polyline
            stroke="#fff"
            stroke-width="3"
            fill="transparent"
            :points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`"
          />
          <polyline
            fill="#fff"
            :points="`
              ${width * 0.52}, 3 ${width * 0.58}, 3
              ${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9
            `"
          />
          <polyline
            fill="#fff"
            :points="`
              ${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1}
              ${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9
            `"
          />

          <polyline
            stroke="#fff"
            stroke-width="3"
            fill="transparent"
            :points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`"
          />
          <polyline
            fill="#fff"
            :points="`
              8, ${height * 0.55} 8, ${height * 0.7}
              2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}
            `"
          />

          <polyline
            stroke="#fff"
            stroke-width="3"
            fill="transparent"
            :points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.35}`"
          />
          <polyline
            fill="#fff"
            :points="`
              ${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.8}
              ${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${width * 0.92 + 7}, ${height - 9}
            `"
          />
        </mask>
      </defs>

      <polygon :fill="backgroundColor" :points="`
        15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
        ${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
        ${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
        ${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
        ${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10}  ${width * 0.92 + 2}, ${height - 6}
        11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
      `" />

      <rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvBorderBox9',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'border-box-9',

      gradientId: `border-box-9-gradient-${id}`,
      maskId: `border-box-9-mask-${id}`,

      defaultColor: ['#11eefd', '#0078d2'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-border-box-9 {
  position: relative;
  width: 100%;
  height: 100%;

  .dv-border-svg-container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/capsuleChart/index.js
================================================
import CapsuleChart from './src/main.vue'

export default function (Vue) {
  Vue.component(CapsuleChart.name, CapsuleChart)
}


================================================
FILE: src/components/capsuleChart/src/main.vue
================================================
<template>
  <div class="dv-capsule-chart">
    <template v-if="mergedConfig">
      <div class="label-column">
        <div v-for="item in mergedConfig.data" :key="item.name">{{ item.name }}</div>
        <div>&nbsp;</div>
      </div>

      <div class="capsule-container">
        <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
          <div
            class="capsule-item-column"
            :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
          >
            <div
              v-if="mergedConfig.showValue"
              class="capsule-item-value"
            >{{ capsuleValue[index] }}</div>
          </div>
        </div>

        <div class="unit-label">
          <div
            v-for="(label, index) in labelData"
            :key="label + index"
          >{{ label }}</div>
        </div>
      </div>

      <div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
    </template>
  </div>
</template>

<script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvCapsuleChart',
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      defaultConfig: {
        /**
         * @description Capsule chart data
         * @type {Array<Object>}
         * @default data = []
         * @example data = [{ name: 'foo1', value: 100 }, { name: 'foo2', value: 100 }]
         */
        data: [],
        /**
         * @description Colors (hex|rgb|rgba|color keywords)
         * @type {Array<String>}
         * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
         * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
         */
        colors: [
          '#37a2da',
          '#32c5e9',
          '#67e0e3',
          '#9fe6b8',
          '#ffdb5c',
          '#ff9f7f',
          '#fb7293'
        ],
        /**
         * @description Chart unit
         * @type {String}
         * @default unit = ''
         */
        unit: '',
        /**
         * @description Show item value
         * @type {Boolean}
         * @default showValue = false
         */
        showValue: false
      },

      mergedConfig: null,

      capsuleLength: [],
      capsuleValue: [],
      labelData: [],
      labelDataLength: []
    }
  },
  watch: {
    config() {
      const { calcData } = this

      calcData()
    }
  },
  methods: {
    calcData() {
      const { mergeConfig, calcCapsuleLengthAndLabelData } = this

      mergeConfig()

      calcCapsuleLengthAndLabelData()
    },
    mergeConfig() {
      let { config, defaultConfig } = this

      this.mergedConfig = deepMerge(
        deepClone(defaultConfig, true),
        config || {}
      )
    },
    calcCapsuleLengthAndLabelData() {
      const { data } = this.mergedConfig

      if (!data.length) return

      const capsuleValue = data.map(({ value }) => value)

      const maxValue = Math.max(...capsuleValue)

      this.capsuleValue = capsuleValue

      this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))

      const oneFifth = maxValue / 5

      const labelData = Array.from(
        new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
      )

      this.labelData = labelData

      this.labelDataLength = Array.from(labelData).map(v =>
        maxValue ? v / maxValue : 0
      )
    }
  },
  mounted() {
    const { calcData } = this

    calcData()
  }
}
</script>

<style lang="less">
.dv-capsule-chart {
  position: relative;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 10px;
  color: #fff;

  .label-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding-right: 10px;
    text-align: right;
    font-size: 12px;

    div {
      height: 20px;
      line-height: 20px;
    }
  }

  .capsule-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .capsule-item {
    box-shadow: 0 0 3px #999;
    height: 10px;
    margin: 5px 0px;
    border-radius: 5px;

    .capsule-item-column {
      position: relative;
      height: 8px;
      margin-top: 1px;
      border-radius: 5px;
      transition: all 0.3s;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .capsule-item-value {
        font-size: 12px;
        transform: translateX(100%);
      }
    }
  }

  .unit-label {
    height: 20px;
    font-size: 12px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .unit-text {
    text-align: right;
    display: flex;
    align-items: flex-end;
    font-size: 12px;
    line-height: 20px;
    margin-left: 10px;
  }
}
</style>


================================================
FILE: src/components/charts/index.js
================================================
import Charts from './src/main.vue'

export default function (Vue) {
  Vue.component(Charts.name, Charts)
}


================================================
FILE: src/components/charts/src/main.vue
================================================
<template>
  <div class="dv-charts-container" :ref="ref">
    <div class="charts-canvas-container" :ref="chartRef" />
  </div>
</template>

<script>
import { uuid } from '../../../util/index'

import autoResize from '../../../mixin/autoResize'

import Charts from '@jiaminghi/charts'

export default {
  name: 'DvCharts',
  mixins: [autoResize],
  props: {
    option: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    const id = uuid()
    return {
      ref: `charts-container-${id}`,
      chartRef: `chart-${id}`,

      chart: null
    }
  },
  watch: {
    option () {
      let { chart, option } = this

      if (!chart) return

      if (!option) option = {}

      chart.setOption(option, true)
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { initChart } = this

      initChart()
    },
    initChart () {
      const { $refs, chartRef, option } = this

      const chart = this.chart = new Charts($refs[chartRef])

      if (!option) return

      chart.setOption(option)
    },
    onResize () {
      const { chart } = this

      if (!chart) return

      chart.resize()
    }
  }
}
</script>

<style lang="less">
.dv-charts-container {
  position: relative;
  width: 100%;
  height: 100%;

  .charts-canvas-container {
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/conicalColumnChart/index.js
================================================
import ConicalColumnChart from './src/main.vue'

export default function (Vue) {
  Vue.component(ConicalColumnChart.name, ConicalColumnChart)
}


================================================
FILE: src/components/conicalColumnChart/src/main.vue
================================================
<template>
  <div class="dv-conical-column-chart" :ref="ref">
    <svg :width="width" :height="height">
      <g
        v-for="(item, i) in column"
        :key="i"
      >
        <path
          :d="item.d"
          :fill="mergedConfig.columnColor"
        />
        <text
          :style="`fontSize:${mergedConfig.fontSize}px`"
          :fill="mergedConfig.textColor"
          :x="item.x"
          :y="height - 4"
        >
          {{ item.name }}
        </text>
        <image
          v-if="mergedConfig.img.length"
          :xlink:href="mergedConfig.img[i % mergedConfig.img.length]"
          :width="mergedConfig.imgSideLength"
          :height="mergedConfig.imgSideLength"
          :x="item.x - mergedConfig.imgSideLength / 2"
          :y="item.y - mergedConfig.imgSideLength"
        />
        <text
          v-if="mergedConfig.showValue"
          :style="`fontSize:${mergedConfig.fontSize}px`"
          :fill="mergedConfig.textColor"
          :x="item.x"
          :y="item.textY"
        >
          {{ item.value }}
        </text>
      </g>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvConicalColumnChart',
  mixins: [autoResize],
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      ref: 'conical-column-chart',

      defaultConfig: {
        /**
         * @description Chart data
         * @type {Array<Object>}
         * @default data = []
         */
        data: [],
        /**
         * @description Chart img
         * @type {Array<String>}
         * @default img = []
         */
        img: [],
        /**
         * @description Chart font size
         * @type {Number}
         * @default fontSize = 12
         */
        fontSize: 12,
        /**
         * @description Img side length
         * @type {Number}
         * @default imgSideLength = 30
         */
        imgSideLength: 30,
        /**
         * @description Column color
         * @type {String}
         * @default columnColor = 'rgba(0, 194, 255, 0.4)'
         */
        columnColor: 'rgba(0, 194, 255, 0.4)',
        /**
         * @description Text color
         * @type {String}
         * @default textColor = '#fff'
         */
        textColor: '#fff',
        /**
         * @description Show value
         * @type {Boolean}
         * @default showValue = false
         */
        showValue: false
      },

      mergedConfig: null,

      column: []
    }
  },
  watch: {
    config () {
      const { calcData } = this

      calcData()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcData } = this

      calcData()
    },
    onResize () {
      const { calcData } = this

      calcData()
    },
    calcData () {
      const { mergeConfig, initData, calcSVGPath } = this

      mergeConfig()

      initData()

      calcSVGPath()
    },
    mergeConfig () {
      const { defaultConfig, config } = this

      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
    },
    initData () {
      const { mergedConfig } = this
      let { data } = mergedConfig

      data = deepClone(data, true)

      data.sort(({ value: a }, { value: b }) => {
        if (a > b) return -1
        if (a < b) return 1
        if (a === b) return 0
      })

      const max = data[0] ? data[0].value : 10

      data = data.map(item => ({
        ...item,
        percent: item.value / max
      }))

      mergedConfig.data = data
    },
    calcSVGPath () {
      const { mergedConfig, width, height } = this

      const { imgSideLength, fontSize, data } = mergedConfig

      const itemNum = data.length
      const gap = width / (itemNum + 1)

      const useAbleHeight = height - imgSideLength - fontSize - 5
      const svgBottom = height - fontSize - 5

      this.column = data.map((item, i) => {
        const { percent } = item

        const middleXPos = gap * (i + 1)
        const leftXPos = gap * i
        const rightXpos = gap * (i + 2)

        const middleYPos = svgBottom - useAbleHeight * percent
        const controlYPos = useAbleHeight * percent * 0.6 + middleYPos

        const d = `
          M${leftXPos}, ${svgBottom}
          Q${middleXPos}, ${controlYPos} ${middleXPos},${middleYPos}
          M${middleXPos},${middleYPos}
          Q${middleXPos}, ${controlYPos} ${rightXpos},${svgBottom}
          L${leftXPos}, ${svgBottom}
          Z
        `

        const textY = (svgBottom + middleYPos) / 2 + fontSize / 2

        return {
          ...item,
          d,
          x: middleXPos,
          y: middleYPos,
          textY
        }
      })
    }
  }
}
</script>

<style lang="less">
.dv-conical-column-chart {
  width: 100%;
  height: 100%;

  text {
    text-anchor: middle;
  }
}
</style>


================================================
FILE: src/components/decoration1/index.js
================================================
import Decoration1 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration1.name, Decoration1)
}


================================================
FILE: src/components/decoration1/src/main.vue
================================================
<template>
  <div class="dv-decoration-1" :ref="ref">
    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">

      <template
        v-for="(point, i) in points"
      >
        <rect
          v-if="Math.random() > 0.6"
          :key="i"
          :fill="mergedColor[0]"
          :x="point[0] - halfPointSideLength"
          :y="point[1] - halfPointSideLength"
          :width="pointSideLength"
          :height="pointSideLength"
        >
          <animate
            v-if="Math.random() > 0.6"
            attributeName="fill"
            :values="`${mergedColor[0]};transparent`"
            dur="1s"
            :begin="Math.random() * 2"
            repeatCount="indefinite"
          />
        </rect>
      </template>

      <rect
        v-if="rects[0]"
        :fill="mergedColor[1]"
        :x="rects[0][0] - pointSideLength"
        :y="rects[0][1] - pointSideLength"
        :width="pointSideLength * 2"
        :height="pointSideLength * 2"
      >
        <animate
          attributeName="width"
          :values="`0;${pointSideLength * 2}`"
          dur="2s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="height"
          :values="`0;${pointSideLength * 2}`"
          dur="2s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="x"
          :values="`${rects[0][0]};${rects[0][0] - pointSideLength}`"
          dur="2s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="y"
          :values="`${rects[0][1]};${rects[0][1] - pointSideLength}`"
          dur="2s"
          repeatCount="indefinite"
        />
      </rect>

      <rect
        v-if="rects[1]"
        :fill="mergedColor[1]"
        :x="rects[1][0] - 40"
        :y="rects[1][1] - pointSideLength"
        :width="40"
        :height="pointSideLength * 2"
      >
        <animate
          attributeName="width"
          values="0;40;0"
          dur="2s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="x"
          :values="`${rects[1][0]};${rects[1][0] - 40};${rects[1][0]}`"
          dur="2s"
          repeatCount="indefinite"
        />
      </rect>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration1',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    const pointSideLength = 2.5

    return {
      ref: 'decoration-1',

      svgWH: [200, 50],

      svgScale: [1, 1],

      rowNum: 4,
      rowPoints: 20,

      pointSideLength,
      halfPointSideLength: pointSideLength / 2,

      points: [],

      rects: [],

      defaultColor: ['#fff', '#0de7c2'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcSVGData } = this

      calcSVGData()
    },
    calcSVGData () {
      const { calcPointsPosition, calcRectsPosition, calcScale } = this

      calcPointsPosition()

      calcRectsPosition()

      calcScale()
    },
    calcPointsPosition () {
      const { svgWH, rowNum, rowPoints } = this

      const [w, h] = svgWH

      const horizontalGap = w / (rowPoints + 1)
      const verticalGap = h / (rowNum + 1)

      let points = new Array(rowNum).fill(0).map((foo, i) =>
        new Array(rowPoints).fill(0).map((foo, j) => [
          horizontalGap * (j + 1), verticalGap * (i + 1)
        ]))

      this.points = points.reduce((all, item) => [...all, ...item], [])
    },
    calcRectsPosition () {
      const { points, rowPoints } = this

      const rect1 = points[rowPoints * 2 - 1]
      const rect2 = points[rowPoints * 2 - 3]

      this.rects = [rect1, rect2]
    },
    calcScale () {
      const { width, height, svgWH } = this

      const [w, h] = svgWH

      this.svgScale = [width / w, height / h]
    },
    onResize () {
      const { calcSVGData } = this

      calcSVGData()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-decoration-1 {
  width: 100%;
  height: 100%;

  svg {
    transform-origin: left top;
  }
}
</style>


================================================
FILE: src/components/decoration10/index.js
================================================
import Decoration10 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration10.name, Decoration10)
}


================================================
FILE: src/components/decoration10/src/main.vue
================================================
<template>
  <div class="dv-decoration-10" :ref="ref">
    <svg :width="width" :height="height">
      <polyline
        :stroke="mergedColor[1]"
        stroke-width="2"
        :points="`0, ${height / 2} ${width}, ${height / 2}`"
      />

      <polyline
        :stroke="mergedColor[0]"
        stroke-width="2"
        :points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
        :stroke-dasharray="`0, ${width * 0.2}`"
        fill="freeze"
      >
        <animate
          :id="animationId2"
          attributeName="stroke-dasharray"
          :values="`0, ${width * 0.2};${width * 0.2}, 0;`"
          dur="3s"
          :begin="`${animationId1}.end`"
          fill="freeze"
        />
        <animate
          attributeName="stroke-dasharray"
          :values="`${width * 0.2}, 0;0, ${width * 0.2}`"
          dur="0.01s"
          :begin="`${animationId7}.end`"
          fill="freeze"
        />
      </polyline>

      <polyline
        :stroke="mergedColor[0]"
        stroke-width="2"
        :points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
        :stroke-dasharray="`0, ${width * 0.6}`"
      >
        <animate
          :id="animationId4"
          attributeName="stroke-dasharray"
          :values="`0, ${width * 0.6};${width * 0.6}, 0`"
          dur="3s"
          :begin="`${animationId3}.end + 1s`"
          fill="freeze"
        />
        <animate
          attributeName="stroke-dasharray"
          :values="`${width * 0.6}, 0;0, ${width * 0.6}`"
          dur="0.01s"
          :begin="`${animationId7}.end`"
          fill="freeze"
        />
      </polyline>

      <polyline
        :stroke="mergedColor[0]"
        stroke-width="2"
        :points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
        :stroke-dasharray="`0, ${width * 0.2}`"
      >
        <animate
          :id="animationId6"
          attributeName="stroke-dasharray"
          :values="`0, ${width * 0.2};${width * 0.2}, 0`"
          dur="3s"
          :begin="`${animationId5}.end + 1s`"
          fill="freeze"
        />
        <animate
          attributeName="stroke-dasharray"
          :values="`${width * 0.2}, 0;0, ${width * 0.3}`"
          dur="0.01s"
          :begin="`${animationId7}.end`"
          fill="freeze"
        />
      </polyline>

      <circle cx="2" :cy="height / 2" r="2" :fill="mergedColor[1]">
        <animate
          :id="animationId1"
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[0]}`"
          :begin="`0s;${animationId7}.end`"
          dur="0.3s"
          fill="freeze"
        />
      </circle>

      <circle :cx="width * 0.2" :cy="height / 2" r="2" :fill="mergedColor[1]">
        <animate
          :id="animationId3"
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[0]}`"
          :begin="`${animationId2}.end`"
          dur="0.3s"
          fill="freeze"
        />
        <animate
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[1]}`"
          dur="0.01s"
          :begin="`${animationId7}.end`"
          fill="freeze"
        />
      </circle>

      <circle :cx="width * 0.8" :cy="height / 2" r="2" :fill="mergedColor[1]">
        <animate
          :id="animationId5"
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[0]}`"
          :begin="`${animationId4}.end`"
          dur="0.3s"
          fill="freeze"
        />
        <animate
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[1]}`"
          dur="0.01s"
          :begin="`${animationId7}.end`"
          fill="freeze"
        />
      </circle>

      <circle :cx="width - 2" :cy="height / 2" r="2" :fill="mergedColor[1]">
        <animate
          :id="animationId7"
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[0]}`"
          :begin="`${animationId6}.end`"
          dur="0.3s"
          fill="freeze"
        />
        <animate
          attributeName="fill"
          :values="`${mergedColor[1]};${mergedColor[1]}`"
          dur="0.01s"
          :begin="`${animationId7}.end`"
          fill="freeze"
        />
      </circle>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration10',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'decoration-10',

      animationId1: `d10ani1${id}`,
      animationId2: `d10ani2${id}`,
      animationId3: `d10ani3${id}`,
      animationId4: `d10ani4${id}`,
      animationId5: `d10ani5${id}`,
      animationId6: `d10ani6${id}`,
      animationId7: `d10ani7${id}`,

      defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-decoration-10 {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>


================================================
FILE: src/components/decoration11/index.js
================================================
import Decoration11 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration11.name, Decoration11)
}


================================================
FILE: src/components/decoration11/src/main.vue
================================================
<template>
  <div class="dv-decoration-11" :ref="ref">
    <svg :width="width" :height="height">
      <polygon
        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
        :stroke="mergedColor[1]"
        :points="`20 10, 25 4, 55 4 60 10`"
      />

      <polygon
        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
        :stroke="mergedColor[1]"
        :points="`20 ${height - 10}, 25 ${height - 4}, 55 ${height - 4} 60 ${height - 10}`"
      />

      <polygon
        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
        :stroke="mergedColor[1]"
        :points="`${width - 20} 10, ${width - 25} 4, ${width - 55} 4 ${width - 60} 10`"
      />

      <polygon
        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
        :stroke="mergedColor[1]"
        :points="`${width - 20} ${height - 10}, ${width - 25} ${height - 4}, ${width - 55} ${height - 4} ${width - 60} ${height - 10}`"
      />

      <polygon
        :fill="fade(mergedColor[0] || defaultColor[0], 20)"
        :stroke="mergedColor[0]"
        :points="`
          20 10, 5 ${height / 2} 20 ${height - 10}
          ${width - 20} ${height - 10} ${width - 5} ${height / 2} ${width - 20} 10
        `"
      />

      <polyline
        fill="transparent"
        :stroke="fade(mergedColor[0] || defaultColor[0], 70)"
        :points="`25 18, 15 ${height / 2} 25 ${height - 18}`"
      />

      <polyline
        fill="transparent"
        :stroke="fade(mergedColor[0] || defaultColor[0], 70)"
        :points="`${width - 25} 18, ${width - 15} ${height / 2} ${width - 25} ${height - 18}`"
      />
    </svg>

    <div class="decoration-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import { fade } from '@jiaminghi/color'

export default {
  name: 'DvDecoration11',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      ref: 'decoration-11',

      defaultColor: ['#1a98fc', '#2cf7fe'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    },
    fade
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-decoration-11 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;

  .decoration-content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>


================================================
FILE: src/components/decoration12/index.js
================================================
import Decoration12 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration12.name, Decoration12)
}


================================================
FILE: src/components/decoration12/src/main.vue
================================================
<template>
  <div class="dv-decoration-12" :ref="ref">
    <svg :width="width" :height="height">
      <defs>
        <g :id="gId">
          <path
            :stroke="pathColor[i]"
            :stroke-width="width / 2"
            fill="transparent"
            v-for="(d, i) in pathD"
            :key="d"
            :d="d"
          />
        </g>

        <radialGradient
          :id="gradientId"
          cx="50%" cy="50%" r="50%"
        >
          <stop offset="0%" stop-color="transparent" stop-opacity="1" />
          <stop offset="100%" :stop-color="fade(mergedColor[1] || defaultColor[1], 30)" stop-opacity="1" />
        </radialGradient>
      </defs>

      <circle
        v-for="r in circleR"
        :key="r"
        :r="r"
        :cx="x"
        :cy="y"
        :stroke="mergedColor[1]"
        :stroke-width="0.5"
        fill="transparent"
      />

      <circle
        r="1"
        :cx="x"
        :cy="y"
        stroke="transparent"
        :fill="`url(#${gradientId})`"
      >
        <animate
          attributeName="r"
          :values="`1;${width / 2}`"
          :dur="`${haloDur}s`"
          repeatCount="indefinite"
        />
        <animate
          attributeName="opacity"
          values="1;0"
          :dur="`${haloDur}s`"
          repeatCount="indefinite"
        />
      </circle>

      <circle
        r="2"
        :cx="x"
        :cy="y"
        :fill="mergedColor[1]"
      />

      <g v-if="showSplitLine">
        <polyline
          v-for="p in splitLinePoints"
          :key="p"
          :points="p"
          :stroke="mergedColor[1]"
          :stroke-width="0.5"
          opacity="0.5"
        />
      </g>

      <path
        v-for="d in arcD"
        :key="d"
        :d="d"
        :stroke="mergedColor[1]"
        stroke-width="2"
        fill="transparent"
      />

      <use :xlink:href="`#${gId}`">
        <animateTransform
          attributeName="transform"
          type="rotate"
          :values="`0, ${x} ${y};360, ${x} ${y}`"
          :dur="`${scanDur}s`"
          repeatCount="indefinite"
        />
      </use>
    </svg>

    <div class="decoration-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone, getCircleRadianPoint } from '@jiaminghi/c-render/lib/plugin/util'

import { fade } from '@jiaminghi/color'

export default {
  name: 'DvDecoration12',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    /**
     * @description Scan animation dur
     */
    scanDur: {
      type: Number,
      default: 3
    },
    /**
     * @description Halo animation dur
     */
    haloDur: {
      type: Number,
      default: 2
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'decoration-12',
      gId: `decoration-12-g-${id}`,
      gradientId: `decoration-12-gradient-${id}`,

      defaultColor: ['#2783ce', '#2cf7fe'],

      mergedColor: [],

      pathD: [],

      pathColor: [],

      circleR: [],

      splitLinePoints: [],

      arcD: [],

      segment: 30,

      sectorAngle: Math.PI / 3,

      ringNum: 3,

      ringWidth: 1,

      showSplitLine: true
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  computed: {
    x () {
      const { width } = this

      return width / 2
    },
    y () {
      const { height } = this

      return height / 2
    }
  },
  methods: {
    init () {
      const { mergeColor, calcPathD, calcPathColor, calcCircleR, calcSplitLinePoints, calcArcD } = this

      mergeColor()

      calcPathD()

      calcPathColor()

      calcCircleR()

      calcSplitLinePoints()

      calcArcD()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    },
    calcPathD () {
      const { x, y, width, segment, sectorAngle } = this

      const startAngle = -Math.PI / 2
      const angleGap = sectorAngle / segment
      const r = width / 4
      let lastEndPoints = getCircleRadianPoint(x, y, r, startAngle)

      this.pathD = new Array(segment)
        .fill('')
        .map((_, i) => {
          const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5))
          const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`
          lastEndPoints = endPoints

          return d
        })
    },
    calcPathColor () {
      const { mergedColor: [color], segment } = this

      const colorGap = 100 / (segment - 1)

      this.pathColor = new Array(segment)
        .fill(color)
        .map((_, i) => fade(color, 100 - i * colorGap))
    },
    calcCircleR () {
      const { segment, ringNum, width, ringWidth } = this

      const radiusGap = (width / 2 - ringWidth / 2) / ringNum

      this.circleR = new Array(ringNum)
        .fill(0)
        .map((_, i) => radiusGap * (i + 1))
    },
    calcSplitLinePoints () {
      const { x, y, width } = this

      const angleGap = Math.PI / 6
      const r = width / 2

      this.splitLinePoints = new Array(6)
        .fill('')
        .map((_, i) => {
          const startAngle = angleGap * (i + 1)
          const endAngle = startAngle + Math.PI
          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
          const endPoint = getCircleRadianPoint(x, y, r, endAngle)

          return `${startPoint.join(',')} ${endPoint.join(',')}`
        })
    },
    calcArcD () {
      const { x, y, width } = this

      const angleGap = Math.PI / 6
      const r = width / 2 - 1

      this.arcD = new Array(4)
        .fill('')
        .map((_, i) => {
          const startAngle = angleGap * (3 * i + 1)
          const endAngle = startAngle + angleGap
          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
          const endPoint = getCircleRadianPoint(x, y, r, endAngle)

          return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`
        })
    },
    afterAutoResizeMixinInit () {
      const { init } = this

      init()
    },
    fade
  }
}
</script>

<style lang="less">
.dv-decoration-12 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;

  .decoration-content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>


================================================
FILE: src/components/decoration2/index.js
================================================
import Decoration2 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration2.name, Decoration2)
}


================================================
FILE: src/components/decoration2/src/main.vue
================================================
<template>
  <div class="dv-decoration-2" :ref="ref">
    <svg :width="`${width}px`" :height="`${height}px`">
      <rect :x="x" :y="y" :width="w" :height="h" :fill="mergedColor[0]">
        <animate
          :attributeName="reverse ? 'height' : 'width'"
          from="0"
          :to="reverse ? height : width"
          :dur="`${dur}s`"
          calcMode="spline"
          keyTimes="0;1"
          keySplines=".42,0,.58,1"
          repeatCount="indefinite"
        />
      </rect>

      <rect :x="x" :y="y" width="1" height="1" :fill="mergedColor[1]">
        <animate
          :attributeName="reverse ? 'y' : 'x'"
          from="0"
          :to="reverse ? height : width"
          :dur="`${dur}s`"
          calcMode="spline"
          keyTimes="0;1"
          keySplines="0.42,0,0.58,1"
          repeatCount="indefinite"
        />
      </rect>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration2',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    reverse: {
      type: Boolean,
      default: false
    },
    dur: {
      type: Number,
      default: 6
    }
  },
  data () {
    return {
      ref: 'decoration-2',

      x: 0,
      y: 0,

      w: 0,
      h: 0,

      defaultColor: ['#3faacb', '#fff'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    },
    reverse () {
      const { calcSVGData } = this

      calcSVGData()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcSVGData } = this

      calcSVGData()
    },
    calcSVGData () {
      const { reverse, width, height } = this

      if (reverse) {
        this.w = 1
        this.h = height
        this.x = width / 2
        this.y = 0
      } else {
        this.w = width
        this.h = 1
        this.x = 0
        this.y = height / 2
      }
    },
    onResize () {
      const { calcSVGData } = this

      calcSVGData()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-decoration-2 {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
</style>


================================================
FILE: src/components/decoration3/index.js
================================================
import Decoration3 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration3.name, Decoration3)
}


================================================
FILE: src/components/decoration3/src/main.vue
================================================
<template>
  <div class="dv-decoration-3" :ref="ref">
    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">

      <template
        v-for="(point, i) in points"
      >
        <rect
          :key="i"
          :fill="mergedColor[0]"
          :x="point[0] - halfPointSideLength"
          :y="point[1] - halfPointSideLength"
          :width="pointSideLength"
          :height="pointSideLength"
        >
          <animate
            v-if="Math.random() > 0.6"
            attributeName="fill"
            :values="`${mergedColor.join(';')}`"
            :dur="Math.random() + 1 + 's'"
            :begin="Math.random() * 2"
            repeatCount="indefinite"
          />
        </rect>
      </template>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration3',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    const pointSideLength = 7

    return {
      ref: 'decoration-3',

      svgWH: [300, 35],

      svgScale: [1, 1],

      rowNum: 2,
      rowPoints: 25,

      pointSideLength,
      halfPointSideLength: pointSideLength / 2,

      points: [],

      defaultColor: ['#7acaec', 'transparent'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcSVGData } = this

      calcSVGData()
    },
    calcSVGData () {
      const { calcPointsPosition, calcScale } = this

      calcPointsPosition()

      calcScale()
    },
    calcPointsPosition () {
      const { svgWH, rowNum, rowPoints } = this

      const [w, h] = svgWH

      const horizontalGap = w / (rowPoints + 1)
      const verticalGap = h / (rowNum + 1)

      let points = new Array(rowNum).fill(0).map((foo, i) =>
        new Array(rowPoints).fill(0).map((foo, j) => [
          horizontalGap * (j + 1), verticalGap * (i + 1)
        ]))

      this.points = points.reduce((all, item) => [...all, ...item], [])
    },
    calcScale () {
      const { width, height, svgWH } = this

      const [w, h] = svgWH

      this.svgScale = [width / w, height / h]
    },
    onResize () {
      const { calcSVGData } = this

      calcSVGData()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-decoration-3 {
  width: 100%;
  height: 100%;

  svg {
    transform-origin: left top;
  }
}
</style>


================================================
FILE: src/components/decoration4/index.js
================================================
import Decoration4 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration4.name, Decoration4)
}


================================================
FILE: src/components/decoration4/src/main.vue
================================================
<template>
  <div class="dv-decoration-4" :ref="ref">
    <div
      :class="`container ${reverse ? 'reverse' : 'normal'}`"
      :style="reverse ? `width:${width}px;height:5px;animation-duration:${dur}s` : `width:5px;height:${height}px;animation-duration:${dur}s`"
    >
      <svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
        <polyline
          :stroke="mergedColor[0]"
          :points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`"
        />
        <polyline
          class="bold-line"
          :stroke="mergedColor[1]"
          stroke-width="3"
          stroke-dasharray="20, 80"
          stroke-dashoffset="-30"
          :points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`"
        />
      </svg>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration4',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    reverse: {
      type: Boolean,
      default: false
    },
    dur: {
      type: Number,
      default: 3
    }
  },
  data () {
    return {
      ref: 'decoration-4',

      defaultColor: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.3)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-decoration-4 {
  position: relative;
  width: 100%;
  height: 100%;

  .container {
    display: flex;
    overflow: hidden;
    position: absolute;
    flex: 1;
  }

  .normal {
    animation: ani-height ease-in-out infinite;
    left: 50%;
    margin-left: -2px;
  }

  .reverse {
    animation: ani-width ease-in-out infinite;
    top: 50%;
    margin-top: -2px;
  }

  @keyframes ani-height {
    0% {
      height: 0%;
    }

    70% {
      height: 100%;
    }

    100% {
      height: 100%;
    }
  }

  @keyframes ani-width {
    0% {
      width: 0%;
    }
    
    70% {
      width: 100%;
    }

    100% {
      width: 100%;
    }
  }
}
</style>


================================================
FILE: src/components/decoration5/index.js
================================================
import Decoration5 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration5.name, Decoration5)
}


================================================
FILE: src/components/decoration5/src/main.vue
================================================
<template>
  <div class="dv-decoration-5" :ref="ref">
    <svg :width="width" :height="height">
      <polyline
        fill="transparent"
        :stroke="mergedColor[0]"
        stroke-width="3"
        :points="line1Points"
      >
        <animate
          attributeName="stroke-dasharray"
          attributeType="XML"
          :from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
          :to="`0, 0, ${line1Length}, 0`"
          :dur="`${dur}s`"
          begin="0s"
          calcMode="spline"
          keyTimes="0;1"
          keySplines="0.4,1,0.49,0.98"
          repeatCount="indefinite"
        />
      </polyline>
      <polyline
        fill="transparent"
        :stroke="mergedColor[1]"
        stroke-width="2"
        :points="line2Points"
      >
        <animate
          attributeName="stroke-dasharray"
          attributeType="XML"
          :from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
          :to="`0, 0, ${line2Length}, 0`"
          :dur="`${dur}s`"
          begin="0s"
          calcMode="spline"
          keyTimes="0;1"
          keySplines=".4,1,.49,.98"
          repeatCount="indefinite"
        />
      </polyline>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { getPolylineLength } from '@jiaminghi/charts/lib/util'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration5',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    dur: {
      type: Number,
      default: 1.2
    }
  },
  data () {
    return {
      ref: 'decoration-5',

      line1Points: '',
      line2Points: '',

      line1Length: 0,
      line2Length: 0,

      defaultColor: ['#3f96a5', '#3f96a5'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcSVGData } = this

      calcSVGData()
    },
    calcSVGData () {
      const { width, height } = this

      let line1Points = [
        [0, height * 0.2], [width * 0.18, height * 0.2], [width * 0.2, height * 0.4], [width * 0.25, height * 0.4],
        [width * 0.27, height * 0.6], [width * 0.72, height * 0.6], [width * 0.75, height * 0.4],
        [width * 0.8, height * 0.4], [width * 0.82, height * 0.2], [width, height * 0.2]
      ]

      let line2Points = [
        [width * 0.3, height * 0.8], [width * 0.7, height * 0.8]
      ]

      const line1Length = getPolylineLength(line1Points)
      const line2Length = getPolylineLength(line2Points)

      line1Points = line1Points.map(point => point.join(',')).join(' ')
      line2Points = line2Points.map(point => point.join(',')).join(' ')

      this.line1Points = line1Points
      this.line2Points = line2Points

      this.line1Length = line1Length
      this.line2Length = line2Length
    },
    onResize () {
      const { calcSVGData } = this

      calcSVGData()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-decoration-5 {
  width: 100%;
  height: 100%;
}
</style>


================================================
FILE: src/components/decoration6/index.js
================================================
import Decoration6 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration6.name, Decoration6)
}


================================================
FILE: src/components/decoration6/src/main.vue
================================================
<template>
  <div class="dv-decoration-6" :ref="ref">
    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
      <template
        v-for="(point, i) in points"
      >
        <rect
          :key="i"
          :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
          :x="point[0] - halfRectWidth"
          :y="point[1] - heights[i] / 2"
          :width="rectWidth"
          :height="heights[i]"
        >
          <animate
            attributeName="y"
            :values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
            :dur="`${randoms[i]}s`"
            keyTimes="0;0.5;1"
            calcMode="spline"
            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
            begin="0s"
            repeatCount="indefinite"
          />
          <animate
            attributeName="height"
            :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
            :dur="`${randoms[i]}s`"
            keyTimes="0;0.5;1"
            calcMode="spline"
            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
            begin="0s"
            repeatCount="indefinite"
          />
        </rect>
      </template>
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { randomExtend } from '../../../util'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration6',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    const rectWidth = 7

    return {
      ref: 'decoration-6',

      svgWH: [300, 35],

      svgScale: [1, 1],

      rowNum: 1,
      rowPoints: 40,

      rectWidth,
      halfRectWidth: rectWidth / 2,

      points: [],
      heights: [],
      minHeights: [],
      randoms: [],

      defaultColor: ['#7acaec', '#7acaec'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcSVGData } = this

      calcSVGData()
    },
    calcSVGData () {
      const { calcPointsPosition, calcScale } = this

      calcPointsPosition()

      calcScale()
    },
    calcPointsPosition () {
      const { svgWH, rowNum, rowPoints } = this

      const [w, h] = svgWH

      const horizontalGap = w / (rowPoints + 1)
      const verticalGap = h / (rowNum + 1)

      let points = new Array(rowNum).fill(0).map((foo, i) =>
        new Array(rowPoints).fill(0).map((foo, j) => [
          horizontalGap * (j + 1), verticalGap * (i + 1)
        ]))

      this.points = points.reduce((all, item) => [...all, ...item], [])
      const heights = this.heights = new Array(rowNum * rowPoints)
        .fill(0).map(foo =>
          Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h))

      this.minHeights = new Array(rowNum * rowPoints)
        .fill(0).map((foo, i) => heights[i] * Math.random())

      this.randoms = new Array(rowNum * rowPoints)
        .fill(0).map(foo => Math.random() + 1.5)
    },
    calcScale () {
      const { width, height, svgWH } = this

      const [w, h] = svgWH

      this.svgScale = [width / w, height / h]
    },
    onResize () {
      const { calcSVGData } = this

      calcSVGData()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-decoration-6 {
  width: 100%;
  height: 100%;

  svg {
    transform-origin: left top;
  }
}
</style>


================================================
FILE: src/components/decoration7/index.js
================================================
import Decoration7 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration7.name, Decoration7)
}


================================================
FILE: src/components/decoration7/src/main.vue
================================================
<template>
  <div class="dv-decoration-7">
    <svg width="21px" height="20px">
      <polyline
        stroke-width="4"
        fill="transparent"
        :stroke="mergedColor[0]"
        points="10, 0 19, 10 10, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[1]"
        points="2, 0 11, 10 2, 20"
      />
    </svg>
    <slot></slot>
    <svg width="21px" height="20px">
      <polyline
        stroke-width="4"
        fill="transparent"
        :stroke="mergedColor[0]"
        points="11, 0 2, 10 11, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[1]"
        points="19, 0 10, 10 19, 20"
      />
    </svg>
  </div>
</template>

<script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration7',
  props: {
    color: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      defaultColor: ['#1dc1f5', '#1dc1f5'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-decoration-7 {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
</style>


================================================
FILE: src/components/decoration8/index.js
================================================
import Decoration8 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration8.name, Decoration8)
}


================================================
FILE: src/components/decoration8/src/main.vue
================================================
<template>
  <div class="dv-decoration-8" :ref="ref">
    <svg :width="width" :height="height">
      <polyline
        :stroke="mergedColor[0]"
        stroke-width="2"
        fill="transparent"
        :points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
      />

      <polyline
        :stroke="mergedColor[0]"
        stroke-width="2"
        fill="transparent"
        :points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
      />

      <polyline
        :stroke="mergedColor[1]"
        fill="transparent"
        stroke-width="3"
        :points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
      />
    </svg>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDecoration8',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    reverse: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      ref: 'decoration-8',

      defaultColor: ['#3f96a5', '#3f96a5'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    xPos (pos) {
      const { reverse, width } = this

      if (!reverse) return pos

      return width - pos
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-decoration-8 {
  display: flex;
  width: 100%;
  height: 100%;
}
</style>


================================================
FILE: src/components/decoration9/index.js
================================================
import Decoration9 from './src/main.vue'

export default function (Vue) {
  Vue.component(Decoration9.name, Decoration9)
}


================================================
FILE: src/components/decoration9/src/main.vue
================================================
<template>
  <div class="dv-decoration-9" :ref="ref">
    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
      <defs>
        <polygon :id="polygonId" points="15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5" />
      </defs>

      <circle
        cx="50"
        cy="50"
        r="45"
        fill="transparent"
        :stroke="mergedColor[1]"
        stroke-width="10"
        stroke-dasharray="80, 100, 30, 100"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          :dur="`${dur}s`"
          repeatCount="indefinite"
        />
      </circle>

      <circle
        cx="50"
        cy="50"
        r="45"
        fill="transparent"
        :stroke="mergedColor[0]"
        stroke-width="6"
        stroke-dasharray="50, 66, 100, 66"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;-360 50 50"
          :dur="`${dur}s`"
          repeatCount="indefinite"
        />
      </circle>

      <circle
        cx="50"
        cy="50"
        r="38"
        fill="transparent"
        :stroke="fade(mergedColor[1] || defaultColor[1], 30)"
        stroke-width="1"
        stroke-dasharray="5, 1"
      />

      <use
        v-for="(foo, i) in new Array(20).fill(0)"
        :key="i"
        :xlink:href="`#${polygonId}`"
        :stroke="mergedColor[1]"
        :fill="Math.random() > 0.4 ? 'transparent' : mergedColor[0]"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          :dur="`${dur}s`"
          :begin="`${i * dur / 20}s`"
          repeatCount="indefinite"
        />
      </use>

      <circle
        cx="50"
        cy="50"
        r="26"
        fill="transparent"
        :stroke="fade(mergedColor[1] || defaultColor[1], 30)"
        stroke-width="1"
        stroke-dasharray="5, 1"
      />
    </svg>

    <slot></slot>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import { fade } from '@jiaminghi/color'

export default {
  name: 'DvDecoration9',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    dur: {
      type: Number,
      default: 3
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'decoration-9',

      polygonId: `decoration-9-polygon-${id}`,

      svgWH: [100, 100],

      svgScale: [1, 1],

      defaultColor: ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'],

      mergedColor: []
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcScale } = this

      calcScale()
    },
    calcScale () {
      const { width, height, svgWH } = this

      const [w, h] = svgWH

      this.svgScale = [width / w, height / h]
    },
    onResize () {
      const { calcScale } = this

      calcScale()
    },
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
    },
    fade
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-decoration-9 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    position: absolute;
    left: 0px;
    top: 0px;
    transform-origin: left top;
  }
}
</style>


================================================
FILE: src/components/digitalFlop/index.js
================================================
import DigitalFlop from './src/main.vue'

export default function (Vue) {
  Vue.component(DigitalFlop.name, DigitalFlop)
}


================================================
FILE: src/components/digitalFlop/src/main.vue
================================================
<template>
  <div class="dv-digital-flop">
    <canvas ref="digital-flop" />
  </div>
</template>

<script>
import CRender from '@jiaminghi/c-render'

import '@jiaminghi/charts/lib/extend/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvDigitalFlop',
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      renderer: null,

      defaultConfig: {
        /**
         * @description Number for digital flop
         * @type {Array<Number>}
         * @default number = []
         * @example number = [10]
         */
        number: [],
        /**
         * @description Content formatter
         * @type {String}
         * @default content = ''
         * @example content = '{nt}个'
         */
        content: '',
        /**
         * @description Number toFixed
         * @type {Number}
         * @default toFixed = 0
         */
        toFixed: 0,
        /**
         * @description Text align
         * @type {String}
         * @default textAlign = 'center'
         * @example textAlign = 'center' | 'left' | 'right'
         */
        textAlign: 'center',
        /**
         * @description rowGap
         * @type {Number}
         @default rowGap = 0
         */
        rowGap: 0,
        /**
         * @description Text style configuration
         * @type {Object} {CRender Class Style}
         */
        style: {
          fontSize: 30,
          fill: '#3de7c9'
        },
        /**
         * @description Number formatter
         * @type {Null|Function}
         */
        formatter: undefined,
        /**
         * @description CRender animationCurve
         * @type {String}
         * @default animationCurve = 'easeOutCubic'
         */
        animationCurve: 'easeOutCubic',
        /**
         * @description CRender animationFrame
         * @type {String}
         * @default animationFrame = 50
         */
        animationFrame: 50
      },

      mergedConfig: null,

      graph: null
    }
  },
  watch: {
    config () {
      const { update } = this

      update()
    }
  },
  methods: {
    init () {
      const { initRender, mergeConfig, initGraph } = this

      initRender()

      mergeConfig()

      initGraph()
    },
    initRender () {
      const { $refs } = this

      this.renderer = new CRender($refs['digital-flop'])
    },
    mergeConfig () {
      const { defaultConfig, config } = this

      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
    },
    initGraph () {
      const { getShape, getStyle, renderer, mergedConfig } = this

      const { animationCurve, animationFrame } = mergedConfig

      const shape = getShape()
      const style = getStyle()

      this.graph = renderer.add({
        name: 'numberText',
        animationCurve,
        animationFrame,
        shape,
        style
      })
    },
    getShape () {
      const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig

      const [w, h] = this.renderer.area

      const position = [w / 2, h / 2]

      if (textAlign === 'left') position[0] = 0
      if (textAlign === 'right') position[0] = w

      return {
        number,
        content,
        toFixed,
        position,
        rowGap,
        formatter
      }
    },
    getStyle () {
      const { style, textAlign } = this.mergedConfig

      return deepMerge(style, {
        textAlign,
        textBaseline: 'middle'
      })
    },
    update () {
      const { mergeConfig, mergeShape, getShape, getStyle, graph, mergedConfig } = this

      graph.animationEnd()

      mergeConfig()

      if (!graph) return

      const { animationCurve, animationFrame } = mergedConfig

      const shape = getShape()
      const style = getStyle()

      mergeShape(graph, shape)

      graph.animationCurve = animationCurve
      graph.animationFrame = animationFrame

      graph.animation('style', style, true)
      graph.animation('shape', shape)
    },
    mergeShape (graph, shape) {
      const cacheNum = graph.shape.number.length
      const shapeNum = shape.number.length

      if (cacheNum !== shapeNum) graph.shape.number = shape.number
    }
  },
  mounted () {
    const { init } = this

    init()
  }
}
</script>

<style lang="less">
.dv-digital-flop {

  canvas {
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: src/components/flylineChart/index.js
================================================
import FlylineChart from './src/main.vue'

export default function (Vue) {
  Vue.component(FlylineChart.name, FlylineChart)
}


================================================
FILE: src/components/flylineChart/src/main.vue
================================================
<template>
  <div
    class="dv-flyline-chart"
    ref="dv-flyline-chart"
    :style="`background-image: url(${mergedConfig ? mergedConfig.bgImgUrl : ''})`"
    @click="consoleClickPos"
  >
    <svg v-if="mergedConfig" :width="width" :height="height">
      <defs>
        <radialGradient
          :id="gradientId"
          cx="50%" cy="50%" r="50%"
        >
          <stop
            offset="0%" stop-color="#fff"
            stop-opacity="1"
          />
          <stop
            offset="100%" stop-color="#fff"
            stop-opacity="0"
          />
        </radialGradient>

        <radialGradient
          :id="gradient2Id"
          cx="50%" cy="50%" r="50%"
        >
          <stop
            offset="0%" stop-color="#fff"
            stop-opacity="0"
          />
          <stop
            offset="100%" stop-color="#fff"
            stop-opacity="1"
          />
        </radialGradient>

        <circle
          v-if="paths[0]"
          :id="`circle${paths[0].toString()}`"
          :cx="paths[0][2][0]"
          :cy="paths[0][2][1]"
        >
          <animate
            attributeName="r"
            :values="`1;${mergedConfig.halo.radius}`"
            :dur="mergedConfig.halo.duration / 10 + 's'"
            repeatCount="indefinite"
          />
          <animate
            attributeName="opacity"
            values="1;0"
            :dur="mergedConfig.halo.duration / 10 + 's'"
            repeatCount="indefinite"
          />
        </circle>
      </defs>

      <image
        v-if="paths[0]"
        :xlink:href="mergedConfig.centerPointImg.url"
        :width="mergedConfig.centerPointImg.width"
        :height="mergedConfig.centerPointImg.height"
        :x="paths[0][2][0] - mergedConfig.centerPointImg.width / 2"
        :y="paths[0][2][1] - mergedConfig.centerPointImg.height / 2"
      />

      <mask :id="`maskhalo${paths[0].toString()}`">
        <use
          v-if="paths[0]"
          :xlink:href="`#circle${paths[0].toString()}`"
          :fill="`url(#${gradient2Id})`"
        />
      </mask>

      <use
        v-if="paths[0] && mergedConfig.halo.show"
        :xlink:href="`#circle${paths[0].toString()}`"
        :fill="mergedConfig.halo.color"
        :mask="`url(#maskhalo${paths[0].toString()})`"
      />

      <g
        v-for="(path, i) in paths"
        :key="i"
      >
        <defs>
          <path
            :id="`path${path.toString()}`"
            :ref="`path${i}`"
            :d="`M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`"
            fill="transparent"
          />
        </defs>

        <use
          :xlink:href="`#path${path.toString()}`"
          :stroke-width="mergedConfig.lineWidth"
          :stroke="mergedConfig.orbitColor"
        />

        <use
          v-if="lengths[i]"
          :xlink:href="`#path${path.toString()}`"
          :stroke-width="mergedConfig.lineWidth"
          :stroke="mergedConfig.flylineColor"
          :mask="`url(#mask${unique}${path.toString()})`"
        >
          <animate
            attributeName="stroke-dasharray"
            :from="`0, ${lengths[i]}`"
            :to="`${lengths[i]}, 0`"
            :dur="times[i] || 0"
            repeatCount="indefinite"
          />
        </use>

        <mask :id="`mask${unique}${path.toString()}`">
          <circle cx="0" cy="0" :r="mergedConfig.flylineRadius" :fill="`url(#${gradientId})`">
            <animateMotion
              :dur="times[i] || 0"
              :path="`M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`"
              rotate="auto"
              repeatCount="indefinite"
            />
          </circle>
        </mask>

        <image
          :xlink:href="mergedConfig.pointsImg.url"
          :width="mergedConfig.pointsImg.width"
          :height="mergedConfig.pointsImg.height"
          :x="path[0][0] - mergedConfig.pointsImg.width / 2"
          :y="path[0][1] - mergedConfig.pointsImg.height / 2"
        />

        <text
          :style="`fontSize:${mergedConfig.text.fontSize}px;`"
          :fill="mergedConfig.text.color"
          :x="path[0][0] + mergedConfig.text.offset[0]"
          :y="path[0][1] + mergedConfig.text.offset[1]"
        >
          {{ texts[i] }}
        </text>

      </g>
    </svg>
  </div>
</template>

<script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import { randomExtend, getPointDistance, uuid } from '../../../util/index'

import autoResize from '../../../mixin/autoResize'

export default {
  name: 'DvFlylineChart',
  mixins: [autoResize],
  props: {
    config: {
      type: Object,
      default: () => ({})
    },
    dev: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'dv-flyline-chart',
      unique: Math.random(),
      maskId: `flyline-mask-id-${id}`,
      maskCircleId: `mask-circle-id-${id}`,
      gradientId: `gradient-id-${id}`,
      gradient2Id: `gradient2-id-${id}`,

      defaultConfig: {
        /**
         * @description Flyline chart center point
         * @type {Array<Number>}
         * @default centerPoint = [0, 0]
         */
        centerPoint: [0, 0],
        /**
         * @description Flyline start points
         * @type {Array<Array<Number>>}
         * @default points = []
         * @example points = [[10, 10], [100, 100]]
         */
        points: [],
        /**
         * @description Flyline width
         * @type {Number}
         * @default lineWidth = 1
         */
        lineWidth: 1,
        /**
         * @description Orbit color
         * @type {String}
         * @default orbitColor = 'rgba(103, 224, 227, .2)'
         */
        orbitColor: 'rgba(103, 224, 227, .2)',
        /**
         * @description Flyline color
         * @type {String}
         * @default orbitColor = '#ffde93'
         */
        flylineColor: '#ffde93',
        /**
         * @description K value
         * @type {Number}
         * @default k = -0.5
         * @example k = -1 ~ 1
         */
        k: -0.5,
        /**
         * @description Flyline curvature
         * @type {Number}
         * @default curvature = 5
         */
        curvature: 5,
        /**
         * @description Flyline radius
         * @type {Number}
         * @default flylineRadius = 100
         */
        flylineRadius: 100,
        /**
         * @description Flyline animation duration
         * @type {Array<Number>}
         * @default duration = [20, 30]
         */
        duration: [20, 30],
        /**
         * @description Relative points position
         * @type {Boolean}
         * @default relative = true
         */
        relative: true,
        /**
         * @description Back ground image url
         * @type {String}
         * @default bgImgUrl = ''
         * @example bgImgUrl = './img/bg.jpg'
         */
        bgImgUrl: '',
        /**
         * @description Text configuration
         * @type {Object}
         */
        text: {
          /**
           * @description Text offset
           * @type {Array<Number>}
           * @default offset = [0, 15]
           */
          offset: [0, 15],
          /**
           * @description Text color
           * @type {String}
           * @default color = '#ffdb5c'
           */
          color: '#ffdb5c',
          /**
           * @description Text font size
           * @type {Number}
           * @default fontSize = 12
           */
          fontSize: 12
        },
        /**
         * @description Halo configuration
         * @type {Object}
         */
        halo: {
          /**
           * @description Weather to show halo
           * @type {Boolean}
           * @default show = true
           * @example show = true | false
           */
          show: true,
          /**
           * @description Halo animation duration (10 = 1s)
           * @type {Number}
           * @default duration = 30
           */
          duration: 30,
          /**
           * @description Halo color
           * @type {String}
           * @default color = '#fb7293'
           */
          color: '#fb7293',
          /**
           * @description Halo max radius
           * @type {Number}
           * @default radius = 120
           */
          radius: 120
        },
        /**
         * @description Center point img configuration
         * @type {Object}
         */
        centerPointImg: {
          /**
           * @description Center point img width
           * @type {Number}
           * @default width = 40
           */
          width: 40,
          /**
           * @description Center point img height
           * @type {Number}
           * @default height = 40
           */
          height: 40,
          /**
           * @description Center point img url
           * @type {String}
           * @default url = ''
           */
          url: ''
        },
        /**
         * @description Points img configuration
         * @type {Object}
         * @default radius = 120
         */
        pointsImg: {
          /**
           * @description Points img width
           * @type {Number}
           * @default width = 15
           */
          width: 15,
          /**
           * @description Points img height
           * @type {Number}
           * @default height = 15
           */
          height: 15,
          /**
           * @description Points img url
           * @type {String}
           * @default url = ''
           */
          url: ''
        }
      },

      mergedConfig: null,

      paths: [],
      lengths: [],
      times: [],
      texts: []
    }
  },
  watch: {
    config () {
      const { calcData } = this

      calcData()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcData } = this

      calcData()
    },
    onResize () {
      const { calcData } = this

      calcData()
    },
    async calcData () {
      const { mergeConfig, createFlylinePaths, calcLineLengths } = this

      mergeConfig()

      createFlylinePaths()

      await calcLineLengths()

      const { calcTimes, calcTexts } = this

      calcTimes()

      calcTexts()
    },
    mergeConfig () {
      let { config, defaultConfig } = this

      const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})

      const { points } = mergedConfig

      mergedConfig.points = points.map(item => {
        if (item instanceof Array) {
          return { position: item, text: '' }
        }

        return item
      })

      this.mergedConfig = mergedConfig
    },
    createFlylinePaths () {
      const { getPath, mergedConfig, width, height } = this

      let { centerPoint, points, relative } = mergedConfig

      points = points.map(({ position }) => position)

      if (relative) {
        centerPoint = [width * centerPoint[0], height * centerPoint[1]]
        points = points.map(([x, y]) => [width * x, height * y])
      }

      this.paths = points.map(point => getPath(centerPoint, point))
    },
    getPath (center, point) {
      const { getControlPoint } = this

      const controlPoint = getControlPoint(center, point)

      return [point, controlPoint, center]
    },
    getControlPoint ([sx, sy], [ex, ey]) {
      const { getKLinePointByx, mergedConfig } = this

      const { curvature, k } = mergedConfig

      const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2]

      const distance = getPointDistance([sx, sy], [ex, ey])

      const targetLength = distance / curvature
      const disDived = targetLength / 2

      let [dx, dy] = [mx, my]

      do {
        dx += disDived
        dy = getKLinePointByx(k, [mx, my], dx)[1]
      } while (getPointDistance([mx, my], [dx, dy]) < targetLength)

      return [dx, dy]
    },
    getKLinePointByx (k, [lx, ly], x) {
      const y = ly - k * lx + k * x

      return [x, y]
    },
    async calcLineLengths () {
      const { $nextTick, paths, $refs } = this

      await $nextTick()

      this.lengths = paths.map((foo, i) => $refs[`path${i}`][0].getTotalLength())
    },
    calcTimes () {
      const { duration, points } = this.mergedConfig

      this.times = points.map(foo => randomExtend(...duration) / 10)
    },
    calcTexts () {
      const { points } = this.mergedConfig

      this.texts = points.map(({ text }) => text)
    },
    consoleClickPos ({ offsetX, offsetY }) {
      const { width, height, dev } = this

      if (!dev) return

      const relativeX = (offsetX / width).toFixed(2)
      const relativeY = (offsetY / height).toFixed(2)

      console.warn(`dv-flyline-chart DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`)
    }
  }
}
</script>

<style lang="less">
.dv-flyline-chart {
  display: flex;
  flex-direction: column;
  background-size: 100% 100%;

  polyline {
    transition: all 0.3s;
  }

  text {
    text-anchor: middle;
    dominant-baseline: middle;
  }
}
</style>


================================================
FILE: src/components/flylineChartEnhanced/index.js
================================================
import FlylineChartEnhanced from './src/main.vue'

export default function (Vue) {
  Vue.component(FlylineChartEnhanced.name, FlylineChartEnhanced)
}


================================================
FILE: src/components/flylineChartEnhanced/src/main.vue
================================================
<template>
  <div
    class="dv-flyline-chart-enhanced"
    :style="`background-image: url(${mergedConfig ? mergedConfig.bgImgSrc : ''})`"
    :ref="ref"
    @click="consoleClickPos"
  >
    <svg v-if="flylines.length" :width="width" :height="height">
      <defs>
        <radialGradient
          :id="flylineGradientId"
          cx="50%" cy="50%" r="50%"
        >
          <stop
            offset="0%" stop-color="#fff"
            stop-opacity="1"
          />
          <stop
            offset="100%" stop-color="#fff"
            stop-opacity="0"
          />
        </radialGradient>

        <radialGradient
          :id="haloGradientId"
          cx="50%" cy="50%" r="50%"
        >
          <stop
            offset="0%" stop-color="#fff"
            stop-opacity="0"
          />
          <stop
            offset="100%" stop-color="#fff"
            stop-opacity="1"
          />
        </radialGradient>
      </defs>

      <!-- points -->
      <g v-for="point in flylinePoints" :key="point.key + Math.random()">
        <defs>
          <circle
            v-if="point.halo.show"
            :id="`halo${unique}${point.key}`"
            :cx="point.coordinate[0]"
            :cy="point.coordinate[1]"
          >
            <animate
              attributeName="r"
              :values="`1;${point.halo.radius}`"
              :dur="`${point.halo.time}s`"
              repeatCount="indefinite"
            />
            <animate
              attributeName="opacity"
              values="1;0"
              :dur="`${point.halo.time}s`"
              repeatCount="indefinite"
            />
          </circle>
        </defs>

        <!-- halo gradient mask -->
        <mask :id="`mask${unique}${point.key}`">
          <use
            v-if="point.halo.show"
            :xlink:href="`#halo${unique}${point.key}`"
            :fill="`url(#${haloGradientId})`"
          />
        </mask>

        <!-- point halo -->
        <use
          v-if="point.halo.show"
          :xlink:href="`#halo${unique}${point.key}`"
          :fill="point.halo.color"
          :mask="`url(#mask${unique}${point.key})`"
        />

        <!-- point icon -->
        <image
          v-if="point.icon.show"
          :xlink:href="point.icon.src"
          :width="point.icon.width"
          :height="point.icon.height"
          :x="point.icon.x"
          :y="point.icon.y"
        />

        <!-- point text -->
        <text
          v-if="point.text.show"
          :style="`fontSize:${point.text.fontSize}px;color:${point.text.color}`"
          :fill="point.text.color"
          :x="point.text.x"
          :y="point.text.y"
        >
          {{ point.name }}
        </text>
      </g>

      <!-- flylines -->
      <g v-for="(line, i) in flylines" :key="line.key + Math.random()">
        <defs>
          <path
            :id="line.key"
            :ref="line.key"
            :d="line.d"
            fill="transparent"
          />
        </defs>

        <!-- orbit line -->
        <use
          :xlink:href="`#${line.key}`"
          :stroke-width="line.width"
          :stroke="line.orbitColor"
        />

        <!-- fly line gradient mask -->
        <mask :id="`mask${unique}${line.key}`">
          <circle cx="0" cy="0" :r="line.radius" :fill="`url(#${flylineGradientId})`">
            <animateMotion
              :dur="line.time"
              :path="line.d"
              rotate="auto"
              repeatCount="indefinite"
            />
          </circle>
        </mask>

        <!-- fly line -->
        <use
          v-if="flylineLengths[i]"
          :xlink:href="`#${line.key}`"
          :stroke-width="line.width"
          :stroke="line.color"
          :mask="`url(#mask${unique}${line.key})`"
        >
          <animate
            attributeName="stroke-dasharray"
            :from="`0, ${flylineLengths[i]}`"
            :to="`${flylineLengths[i]}, 0`"
            :dur="line.time"
            repeatCount="indefinite"
          />
        </use>
      </g>
    </svg>
  </div>
</template>

<script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import { randomExtend, getPointDistance, uuid } from '../../../util/index'

import autoResize from '../../../mixin/autoResize'

export default {
  name: 'DvFlylineChartEnhanced',
  mixins: [autoResize],
  props: {
    config: {
      type: Object,
      default: () => ({})
    },
    dev: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const id = uuid()
    return {
      ref: 'dv-flyline-chart-enhanced',
      unique: Math.random(),
      flylineGradientId: `flyline-gradient-id-${id}`,
      haloGradientId: `halo-gradient-id-${id}`,
      /**
       * @description Type Declaration
       * 
       * interface Halo {
       *    show?: boolean
       *    duration?: [number, number]
       *    color?: string
       *    radius?: number
       * }
       * 
       * interface Text {
       *    show?: boolean
       *    offset?: [number, number]
       *    color?: string
       *    fontSize?: number
       * }
       * 
       * interface Icon {
       *    show?: boolean
       *    src?: string
       *    width?: number
       *    height?: number
       * }
       * 
       * interface Point {
       *    name: string
       *    coordinate: [number, number]
       *    halo?: Halo
       *    text?: Text
       *    icon?: Icon
       * }
       * 
       * interface Line {
       *    width?: number
       *    color?: string
       *    orbitColor?: string
       *    duration?: [number, number]
       *    radius?: string
       * }
       * 
       * interface Flyline extends Line {
       *    source: string
       *    target: string
       * }
       * 
       * interface FlylineWithPath extends Flyline {
       *    d: string
       *    path: [[number, number], [number, number], [number, number]]
       *    key: string
       * }
       */
      defaultConfig: {
        /**
         * @description Flyline chart points
         * @type {Point[]}
         * @default points = []
         */
        points: [],
        /**
         * @description Lines
         * @type {Flyline[]}
         * @default lines = []
         */
        lines: [],
        /**
         * @description Global halo configuration
         * @type {Halo}
         */
        halo: {
          /**
           * @description Whether to show halo
           * @type {Boolean}
           * @default show = false
           */
          show: false,
          /**
           * @description Halo animation duration (1s = 10)
           * @type {[number, number]}
           */
          duration: [20, 30],
          /**
           * @description Halo color
           * @type {String}
           * @default color = '#fb7293'
           */
          color: '#fb7293',
          /**
           * @description Halo radius
           * @type {Number}
           * @default radius = 120
           */
          radius: 120
        },
        /**
         * @description Global text configuration
         * @type {Text}
         */
        text: {
          /**
           * @description Whether to show text
           * @type {Boolean}
           * @default show = false
           */
          show: false,
          /**
           * @description Text offset
           * @type {[number, number]}
           * @default offset = [0, 15]
           */
          offset: [0, 15],
          /**
           * @description Text color
           * @type {String}
           * @default color = '#ffdb5c'
           */
          color: '#ffdb5c',
          /**
           * @description Text font size
           * @type {Number}
           * @default fontSize = 12
           */
          fontSize: 12
        },
        /**
         * @description Global icon configuration
         * @type {Icon}
         */
        icon: {
          /**
           * @description Whether to show icon
           * @type {Boolean}
           * @default show = false
           */
          show: false,
          /**
           * @description Icon src
           * @type {String}
           * @default src = ''
           */
          src: '',
          /**
           * @description Icon width
           * @type {Number}
           * @default width = 15
           */
          width: 15,
          /**
           * @description Icon height
           * @type {Number}
           * @default width = 15
           */
          height: 15
        },
        /**
         * @description Global line configuration
         * @type {Line}
         */
        line: {
          /**
           * @description Line width
           * @type {Number}
           * @default width = 1
           */
          width: 1,
          /**
           * @description Flyline color
           * @type {String}
           * @default color = '#ffde93'
           */
          color: '#ffde93',
          /**
           * @description Orbit color
           * @type {String}
           * @default orbitColor = 'rgba(103, 224, 227, .2)'
           */
          orbitColor: 'rgba(103, 224, 227, .2)',
          /**
           * @description Flyline animation duration
           * @type {[number, number]}
           * @default duration = [20, 30]
           */
          duration: [20, 30],
          /**
           * @description Flyline radius
           * @type {Number}
           * @default radius = 100
           */
          radius: 100
        },
        /**
         * @description Back ground image url
         * @type {String}
         * @default bgImgSrc = ''
         */
        bgImgSrc: '',
        /**
         * @description K value
         * @type {Number}
         * @default k = -0.5
         * @example k = -1 ~ 1
         */
        k: -0.5,
        /**
         * @description Flyline curvature
         * @type {Number}
         * @default curvature = 5
         */
        curvature: 5,
        /**
         * @description Relative points position
         * @type {Boolean}
         * @default relative = true
         */
        relative: true
      },
      /**
       * @description Fly line data
       * @type {FlylineWithPath[]}
       * @default flylines = []
       */
      flylines: [],
      /**
       * @description Fly line lengths
       * @type {Number[]}
       * @default flylineLengths = []
       */
      flylineLengths: [],
      /**
       * @description Fly line points
       * @default flylinePoints = []
       */
      flylinePoints: [],

      mergedConfig: null
    }
  },
  watch: {
    config () {
      const { calcData } = this

      calcData()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcData } = this

      calcData()
    },
    onResize () {
      const { calcData } = this

      calcData()
    },
    async calcData () {
      const { mergeConfig, calcflylinePoints, calcLinePaths } = this

      mergeConfig()

      calcflylinePoints()

      calcLinePaths()

      const { calcLineLengths } = this

      await calcLineLengths()
    },
    mergeConfig () {
      let { config, defaultConfig } = this

      const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})

      const { points, lines, halo, text, icon, line } = mergedConfig

      mergedConfig.points = points.map(item => {
        item.halo = deepMerge(deepClone(halo, true), item.halo || {})
        item.text = deepMerge(deepClone(text, true), item.text || {})
        item.icon = deepMerge(deepClone(icon, true), item.icon || {})

        return item
      })

      mergedConfig.lines = lines.map(item => {
        return deepMerge(deepClone(line, true), item)
      })

      this.mergedConfig = mergedConfig
    },
    calcflylinePoints () {
      const { mergedConfig, width, height } = this

      const { relative, points } = mergedConfig

      this.flylinePoints = points.map((item, i) => {
        const { coordinate: [x, y], halo, icon, text } = item

        if (relative) item.coordinate = [x * width, y * height]

        item.halo.time = randomExtend(...halo.duration) / 10

        const { width: iw, height: ih } = icon
        item.icon.x = item.coordinate[0] - iw / 2
        item.icon.y = item.coordinate[1] - ih / 2

        const [ox, oy] = text.offset
        item.text.x = item.coordinate[0] + ox
        item.text.y = item.coordinate[1] + oy

        item.key = `${item.coordinate.toString()}${i}`

        return item
      })
    },
    calcLinePaths () {
      const { getPath, mergedConfig } = this

      const { points, lines } = mergedConfig

      this.flylines = lines.map(item => {
        const { source, target, duration } = item

        const sourcePoint = points.find(({ name }) => name === source).coordinate
        const targetPoint = points.find(({ name }) => name === target).coordinate

        const path = getPath(sourcePoint, targetPoint).map(item => item.map(v => parseFloat(v.toFixed(10))))
        const d = `M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`
        const key = `path${path.toString()}`
        const time = randomExtend(...duration) / 10

        return { ...item, path, key, d, time }
      })
    },
    getPath (start, end) {
      const { getControlPoint } = this

      const controlPoint = getControlPoint(start, end)

      return [start, controlPoint, end]
    },
    getControlPoint ([sx, sy], [ex, ey]) {
      const { getKLinePointByx, mergedConfig } = this

      const { curvature, k } = mergedConfig

      const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2]

      const distance = getPointDistance([sx, sy], [ex, ey])

      const targetLength = distance / curvature
      const disDived = targetLength / 2

      let [dx, dy] = [mx, my]

      do {
        dx += disDived
        dy = getKLinePointByx(k, [mx, my], dx)[1]
      } while (getPointDistance([mx, my], [dx, dy]) < targetLength)

      return [dx, dy]
    },
    getKLinePointByx (k, [lx, ly], x) {
      const y = ly - k * lx + k * x

      return [x, y]
    },
    async calcLineLengths () {
      const { $nextTick, flylines, $refs } = this

      await $nextTick()

      this.flylineLengths = flylines.map(({ key }) => $refs[key][0].getTotalLength())
    },
    consoleClickPos ({ offsetX, offsetY }) {
      const { width, height, dev } = this

      if (!dev) return

      const relativeX = (offsetX / width).toFixed(2)
      const relativeY = (offsetY / height).toFixed(2)

      console.warn(`dv-flyline-chart-enhanced DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`)
    }
  }
}
</script>

<style lang="less">
.dv-flyline-chart-enhanced {
  display: flex;
  flex-direction: column;
  background-size: 100% 100%;

  text {
    text-anchor: middle;
    dominant-baseline: middle;
  }
}
</style>


================================================
FILE: src/components/fullScreenContainer/index.js
================================================
import FullScreenContainer from './src/main.vue'

export default function (Vue) {
  Vue.component(FullScreenContainer.name, FullScreenContainer)
}


================================================
FILE: src/components/fullScreenContainer/src/main.vue
================================================
<template>
  <div id="dv-full-screen-container" :ref="ref">
    <template v-if="ready">
      <slot></slot>
    </template>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize.js'

export default {
  name: 'DvFullScreenContainer',
  mixins: [autoResize],
  data () {
    return {
      ref: 'full-screen-container',
      allWidth: 0,
      scale: 0,
      datavRoot: '',
      ready: false
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { initConfig, setAppScale } = this

      initConfig()

      setAppScale()

      this.ready = true
    },
    initConfig () {
      const { dom } = this
      const { width, height } = screen

      this.allWidth = width

      dom.style.width = `${width}px`
      dom.style.height = `${height}px`
    },
    setAppScale () {
      const { allWidth, dom } = this

      const currentWidth = document.body.clientWidth

      dom.style.transform = `scale(${currentWidth / allWidth})`
    },
    onResize () {
      const { setAppScale } = this

      setAppScale()
    }
  }
}
</script>

<style lang="less">
#dv-full-screen-container {
  position: fixed;
  top: 0px;
  left: 0px;
  overflow: hidden;
  transform-origin: left top;
  z-index: 999;
}
</style>


================================================
FILE: src/components/loading/index.js
================================================
import Loading from './src/main.vue'

export default function (Vue) {
  Vue.component(Loading.name, Loading)
}


================================================
FILE: src/components/loading/src/main.vue
================================================
<template>
  <div class="dv-loading">
    <svg width="50px" height="50px">
      <circle
        cx="25"
        cy="25"
        r="20"
        fill="transparent"
        stroke-width="3"
        stroke-dasharray="31.415, 31.415"
        stroke="#02bcfe"
        stroke-linecap="round"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0, 25 25;360, 25 25"
          dur="1.5s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="stroke"
          values="#02bcfe;#3be6cb;#02bcfe"
          dur="3s"
          repeatCount="indefinite"
        />
      </circle>

      <circle
        cx="25"
        cy="25"
        r="10"
        fill="transparent"
        stroke-width="3"
        stroke-dasharray="15.7, 15.7"
        stroke="#3be6cb"
        stroke-linecap="round"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="360, 25 25;0, 25 25"
          dur="1.5s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="stroke"
          values="#3be6cb;#02bcfe;#3be6cb"
          dur="3s"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
    <div class="loading-tip">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DvLoading'
}
</script>

<style lang="less">
.dv-loading {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .loading-tip {
    font-size: 15px;
  }
}
</style>


================================================
FILE: src/components/percentPond/index.js
================================================
import PercentPond from './src/main.vue'

export default function (Vue) {
  Vue.component(PercentPond.name, PercentPond)
}


================================================
FILE: src/components/percentPond/src/main.vue
================================================
<template>
  <div class="dv-percent-pond" ref="percent-pond">
    <svg>
      <defs>
        <linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop v-for="lc in linearGradient" :key="lc[0]"
            :offset="`${lc[0]}%`"
            :stop-color="lc[1]" />
        </linearGradient>

        <linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
          <stop v-for="lc in linearGradient" :key="lc[0]"
            :offset="`${lc[0]}%`"
            :stop-color="lc[1]" />
        </linearGradient>
      </defs>
      <rect
        :x="mergedConfig ? mergedConfig.borderWidth / 2 : '0'"
        :y="mergedConfig ? mergedConfig.borderWidth / 2 : '0'"
        :rx="mergedConfig ? mergedConfig.borderRadius : '0'"
        :ry="mergedConfig ? mergedConfig.borderRadius : '0'"
        fill="transparent"
        :stroke-width="mergedConfig ? mergedConfig.borderWidth : '0'"
        :stroke="`url(#${gradientId1})`"
        :width="rectWidth > 0 ? rectWidth : 0"
        :height="rectHeight > 0 ? rectHeight : 0"
      />
      <polyline
        :stroke-width="polylineWidth"
        :stroke-dasharray="mergedConfig ? mergedConfig.lineDash.join(',') : '0'"
        :stroke="`url(#${polylineGradient})`"
        :points="points"
      />
      <text
        :stroke="mergedConfig ? mergedConfig.textColor : '#fff'"
        :fill="mergedConfig ? mergedConfig.textColor : '#fff'"
        :x="width / 2"
        :y="height / 2"
      >
        {{ details }}
      </text>
    </svg>
  </div>
</template>

<script>
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvPercentPond',
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    const id = uuid()
    return {
      gradientId1: `percent-pond-gradientId1-${id}`,
      gradientId2: `percent-pond-gradientId2-${id}`,

      width: 0,
      height: 0,

      defaultConfig: {
        /**
         * @description Value
         * @type {Number}
         * @default value = 0
         */
        value: 0,
        /**
         * @description Colors (hex|rgb|rgba|color keywords)
         * @type {Array<String>}
         * @default colors = ['#00BAFF', '#3DE7C9']
         * @example colors = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
         */
        colors: ['#3DE7C9', '#00BAFF'],
        /**
         * @description Border width
         * @type {Number}
         * @default borderWidth = 3
         */
        borderWidth: 3,
        /**
         * @description Gap between border and pond
         * @type {Number}
         * @default borderGap = 3
         */
        borderGap: 3,
        /**
         * @description Line dash
         * @type {Array<Number>}
         * @default lineDash = [5, 1]
         */
        lineDash: [5, 1],
        /**
         * @description Text color
         * @type {String}
         * @default textColor = '#fff'
         */
        textColor: '#fff',
        /**
         * @description Border radius
         * @type {Number}
         * @default borderRadius = 5
         */
        borderRadius: 5,
        /**
         * @description Local Gradient
         * @type {Boolean}
         * @default localGradient = false
         * @example localGradient = false | true
         */
        localGradient: false,
        /**
         * @description Formatter
         * @type {String}
         * @default formatter = '{value}%'
         */
        formatter: '{value}%'
      },

      mergedConfig: null
    }
  },
  computed: {
    rectWidth () {
      const { mergedConfig, width } = this

      if (!mergedConfig) return 0

      const { borderWidth } = mergedConfig

      return width - borderWidth
    },
    rectHeight () {
      const { mergedConfig, height } = this

      if (!mergedConfig) return 0

      const { borderWidth } = mergedConfig

      return height - borderWidth
    },
    points () {
      const { mergedConfig, width, height } = this

      const halfHeight = height / 2

      if (!mergedConfig) return `0, ${halfHeight} 0, ${halfHeight}`

      const { borderWidth, borderGap, value } = mergedConfig

      const polylineLength = (width - (borderWidth + borderGap) * 2) / 100 * value

      return `
        ${borderWidth + borderGap}, ${halfHeight}
        ${borderWidth + borderGap + polylineLength}, ${halfHeight + 0.001}
      `
    },
    polylineWidth () {
      const { mergedConfig, height } = this

      if (!mergedConfig) return 0

      const { borderWidth, borderGap } = mergedConfig

      return height - (borderWidth + borderGap) * 2
    },
    linearGradient () {
      const { mergedConfig } = this

      if (!mergedConfig) return []

      const { colors } = mergedConfig

      const colorNum = colors.length

      const colorOffsetGap = 100 / (colorNum - 1)

      return colors.map((c, i) => [colorOffsetGap * i, c])
    },
    polylineGradient () {
      const { gradientId1, gradientId2, mergedConfig } = this

      if (!mergedConfig) return gradientId2

      if (mergedConfig.localGradient) return gradientId1

      return gradientId2
    },
    gradient2XPos () {
      const { mergedConfig } = this

      if (!mergedConfig) return '100%'

      const { value } = mergedConfig

      return `${200 - value}%`
    },
    details () {
      const { mergedConfig } = this

      if (!mergedConfig) return ''

      const { value, formatter } = mergedConfig

      return formatter.replace('{value}', value)
    }
  },
  watch: {
    config () {
      const { mergeConfig } = this

      mergeConfig()
    }
  },
  methods: {
    async init () {
      const { initWH, config, mergeConfig } = this

      await initWH()

      if (!config) return

      mergeConfig()
    },
    async initWH () {
      const { $nextTick, $refs } = this

      await $nextTick()

      const { clientWidth, clientHeight } = $refs['percent-pond']

      this.width = clientWidth
      this.height = clientHeight
    },
    mergeConfig () {
      const { config, defaultConfig } = this

      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
    }
  },
  mounted () {
    const { init } = this

    init()
  }
}
</script>

<style lang="less">
.dv-percent-pond {
  position: relative;
  display: flex;
  flex-direction: column;

  svg {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
  }

  polyline {
    transition: all 0.3s;
  }

  text {
    font-size: 25px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
  }
}
</style>


================================================
FILE: src/components/scrollBoard/index.js
================================================
import ScrollBoard from './src/main.vue'

export default function (Vue) {
  Vue.component(ScrollBoard.name, ScrollBoard)
}


================================================
FILE: src/components/scrollBoard/src/main.vue
================================================
<template>
  <div class="dv-scroll-board" :ref="ref">
    <div class="header" v-if="header.length && mergedConfig" :style="`background-color: ${mergedConfig.headerBGC};`">
      <div
        class="header-item"
        v-for="(headerItem, i) in header"
        :key="`${headerItem}${i}`"
        :style="`
          height: ${mergedConfig.headerHeight}px;
          line-height: ${mergedConfig.headerHeight}px;
          width: ${widths[i]}px;
        `"
        :align="aligns[i]"
        v-html="headerItem"
      />
    </div>

    <div
      v-if="mergedConfig"
      class="rows"
      :style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)}px;`"
    >
      <div
        class="row-item"
        v-for="(row, ri) in rows"
        :key="`${row.toString()}${row.scroll}`"
        :style="`
          height: ${heights[ri]}px;
          line-height: ${heights[ri]}px;
          background-color: ${mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
        `"
      >
        <div
          class="ceil"
          v-for="(ceil, ci) in row.ceils"
          :key="`${ceil}${ri}${ci}`"
          :style="`width: ${widths[ci]}px;`"
          :align="aligns[ci]"
          v-html="ceil"
          @click="emitEvent('click', ri, ci, row, ceil)"
          @mouseenter="handleHover(true, ri, ci, row, ceil)"
          @mouseleave="handleHover(false)"
        />

      </div>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvScrollBoard',
  mixins: [autoResize],
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      ref: 'scroll-board',

      defaultConfig: {
        /**
         * @description Board header
         * @type {Array<String>}
         * @default header = []
         * @example header = ['column1', 'column2', 'column3']
         */
        header: [],
        /**
         * @description Board data
         * @type {Array<Array>}
         * @default data = []
         */
        data: [],
        /**
         * @description Row num
         * @type {Number}
         * @default rowNum = 5
         */
        rowNum: 5,
        /**
         * @description Header background color
         * @type {String}
         * @default headerBGC = '#00BAFF'
         */
        headerBGC: '#00BAFF',
        /**
         * @description Odd row background color
         * @type {String}
         * @default oddRowBGC = '#003B51'
         */
        oddRowBGC: '#003B51',
        /**
         * @description Even row background color
         * @type {String}
         * @default evenRowBGC = '#003B51'
         */
        evenRowBGC: '#0A2732',
        /**
         * @description Scroll wait time
         * @type {Number}
         * @default waitTime = 2000
         */
        waitTime: 2000,
        /**
         * @description Header height
         * @type {Number}
         * @default headerHeight = 35
         */
        headerHeight: 35,
        /**
         * @description Column width
         * @type {Array<Number>}
         * @default columnWidth = []
         */
        columnWidth: [],
        /**
         * @description Column align
         * @type {Array<String>}
         * @default align = []
         * @example align = ['left', 'center', 'right']
         */
        align: [],
        /**
         * @description Show index
         * @type {Boolean}
         * @default index = false
         */
        index: false,
        /**
         * @description index Header
         * @type {String}
         * @default indexHeader = '#'
         */
        indexHeader: '#',
        /**
         * @description Carousel type
         * @type {String}
         * @default carousel = 'single'
         * @example carousel = 'single' | 'page'
         */
        carousel: 'single',
        /**
         * @description Pause scroll when mouse hovered
         * @type {Boolean}
         * @default hoverPause = true
         * @example hoverPause = true | false
         */
        hoverPause: true
      },

      mergedConfig: null,

      header: [],

      rowsData: [],

      rows: [],

      widths: [],

      heights: [],

      avgHeight: 0,

      aligns: [],

      animationIndex: 0,

      animationHandler: '',

      updater: 0,

      needCalc: false
    }
  },
  watch: {
    config () {
      const { stopAnimation, calcData } = this

      stopAnimation()

      this.animationIndex = 0

      calcData()
    }
  },
  methods: {
    handleHover(enter, ri, ci, row, ceil){
      const { mergedConfig, emitEvent, stopAnimation, animation } = this

      if (enter) emitEvent('mouseover', ri, ci, row, ceil)
      if (!mergedConfig.hoverPause) return

      if (enter) {
        stopAnimation()
      } else {
        animation(true)
      }
    },
    afterAutoResizeMixinInit () {
      const { calcData } = this

      calcData()
    },
    onResize () {
      const { mergedConfig, calcWidths, calcHeights } = this

      if (!mergedConfig) return

      calcWidths()

      calcHeights()
    },
    calcData () {
      const { mergeConfig, calcHeaderData, calcRowsData } = this

      mergeConfig()

      calcHeaderData()

      calcRowsData()

      const { calcWidths, calcHeights, calcAligns } = this

      calcWidths()

      calcHeights()

      calcAligns()

      const { animation } = this

      animation(true)
    },
    mergeConfig () {
      let { config, defaultConfig } = this

      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
    },
    calcHeaderData () {
      let { header, index, indexHeader} = this.mergedConfig

      if (!header.length) {
        this.header = []

        return
      }

      header = [...header]

      if (index) header.unshift(indexHeader)

      this.header = header
    },
    calcRowsData () {
      let { data, index, headerBGC, rowNum } = this.mergedConfig

      if (index) {
        data = data.map((row, i) => {
          row = [...row]

          const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</span>`

          row.unshift(indexTag)

          return row
        })
      }

      data = data.map((ceils, i) => ({ ceils, rowIndex: i }))

      const rowLength = data.length

      if (rowLength > rowNum && rowLength < 2 * rowNum) {
        data = [...data, ...data]
      }

      data = data.map((d, i) => ({ ...d, scroll: i }))

      this.rowsData = data
      this.rows = data
    },
    calcWidths () {
      const { width, mergedConfig, rowsData } = this

      const { columnWidth, header } = mergedConfig

      const usedWidth = columnWidth.reduce((all, w) => all + w, 0)

      let columnNum = 0
      if (rowsData[0]) {
        columnNum = rowsData[0].ceils.length
      } else if (header.length) {
        columnNum = header.length
      }

      const avgWidth = (width - usedWidth) / (columnNum - columnWidth.length)

      const widths = new Array(columnNum).fill(avgWidth)

      this.widths = deepMerge(widths, columnWidth)
    },
    calcHeights (onresize = false) {
      const { height, mergedConfig, header } = this

      const { headerHeight, rowNum, data } = mergedConfig

      let allHeight = height

      if (header.length) allHeight -= headerHeight

      const avgHeight = allHeight / rowNum

      this.avgHeight = avgHeight

      if (!onresize) this.heights = new Array(data.length).fill(avgHeight)
    },
    calcAligns () {
      const { header, mergedConfig } = this

      const columnNum = header.length

      let aligns = new Array(columnNum).fill('left')

      const { align } = mergedConfig

      this.aligns = deepMerge(aligns, align)
    },
    async animation (start = false) {
      const { needCalc, calcHeights, calcRowsData } = this

      if (needCalc) {
        calcRowsData()
        calcHeights()
        this.needCalc = false
      }

      let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this

      const { waitTime, carousel, rowNum } = mergedConfig

      const rowLength = rowsData.length

      if (rowNum >= rowLength) return

      if (start) {
        await new Promise(resolve => setTimeout(resolve, waitTime))
        if (updater !== this.updater) return
      }

      const animationNum = carousel === 'single' ? 1 : rowNum

      let rows = rowsData.slice(animationIndex)
      rows.push(...rowsData.slice(0, animationIndex))

      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
      this.heights = new Array(rowLength).fill(avgHeight)

      await new Promise(resolve => setTimeout(resolve, 300))
      if (updater !== this.updater) return

      this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))

      animationIndex += animationNum

      const back = animationIndex - rowLength
      if (back >= 0) animationIndex = back

      this.animationIndex = animationIndex
      this.animationHandler = setTimeout(animation, waitTime - 300)
    },
    stopAnimation () {
      const { animationHandler, updater } = this

      this.updater = (updater + 1) % 999999

      if (!animationHandler) return

      clearTimeout(animationHandler)
    },
    emitEvent (type, ri, ci, row, ceil) {
      const { ceils, rowIndex } = row

      this.$emit(type, {
        row: ceils,
        ceil,
        rowIndex,
        columnIndex: ci
      })
    },
    updateRows(rows, animationIndex) {
      const { mergedConfig, animationHandler, animation } = this

      this.mergedConfig = {
        ...mergedConfig,
        data: [...rows]
      }

      this.needCalc = true

      if (typeof animationIndex === 'number') this.animationIndex = animationIndex
      if (!animationHandler) animation(true)
    }
  },
  destroyed () {
    const { stopAnimation } = this

    stopAnimation()
  }
}
</script>

<style lang="less">
.dv-scroll-board {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;

  .text {
    padding: 0 10px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header {
    display: flex;
    flex-direction: row;
    font-size: 15px;

    .header-item {
      .text;
      transition: all 0.3s;
    }
  }

  .rows {
    overflow: hidden;

    .row-item {
      display: flex;
      font-size: 14px;
      transition: all 0.3s;
    }

    .ceil {
      .text;
    }

    .index {
      border-radius: 3px;
      padding: 0px 3px;
    }
  }
}
</style>


================================================
FILE: src/components/scrollRankingBoard/index.js
================================================
import ScrollRankingBoard from './src/main.vue'

export default function (Vue) {
  Vue.component(ScrollRankingBoard.name, ScrollRankingBoard)
}


================================================
FILE: src/components/scrollRankingBoard/src/main.vue
================================================
<template>
  <div class="dv-scroll-ranking-board" :ref="ref">
    <div
      class="row-item"
      v-for="(item, i) in rows"
      :key="item.toString() + item.scroll"
      :style="`height: ${heights[i]}px;`"
    >
      <div class="ranking-info">
        <div class="rank">No.{{ item.ranking }}</div>
        <div class="info-name" v-html="item.name" />
        <div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
      </div>

      <div class="ranking-column">
        <div
          class="inside-column"
          :style="`width: ${item.percent}%;`"
        >
          <div class="shine" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

export default {
  name: 'DvScrollRankingBoard',
  mixins: [autoResize],
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      ref: 'scroll-ranking-board',

      defaultConfig: {
        /**
         * @description Board data
         * @type {Array<Object>}
         * @default data = []
         */
        data: [],
        /**
         * @description Row num
         * @type {Number}
         * @default rowNum = 5
         */
        rowNum: 5,
        /**
         * @description Scroll wait time
         * @type {Number}
         * @default waitTime = 2000
         */
        waitTime: 2000,
        /**
         * @description Carousel type
         * @type {String}
         * @default carousel = 'single'
         * @example carousel = 'single' | 'page'
         */
        carousel: 'single',
        /**
         * @description Value unit
         * @type {String}
         * @default unit = ''
         * @example unit = 'ton'
         */
        unit: '',
        /**
         * @description Auto sort by value
         * @type {Boolean}
         * @default sort = true
         */
        sort: true,
        /**
         * @description Value formatter
         * @type {Function}
         * @default valueFormatter = null
         */
        valueFormatter: null
      },

      mergedConfig: null,

      rowsData: [],

      rows: [],

      heights: [],

      animationIndex: 0,

      animationHandler: '',

      updater: 0
    }
  },
  watch: {
    config () {
      const { stopAnimation, calcData } = this

      stopAnimation()

      calcData()
    }
  },
  methods: {
    afterAutoResizeMixinInit () {
      const { calcData } = this

      calcData()
    },
    onResize () {
      const { mergedConfig, calcHeights } = this

      if (!mergedConfig) return

      calcHeights(true)
    },
    calcData () {
      const { mergeConfig, calcRowsData } = this

      mergeConfig()

      calcRowsData()

      const { calcHeights } = this

      calcHeights()

      const { animation } = this

      animation(true)
    },
    mergeConfig () {
      let { config, defaultConfig } = this

      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
    },
    calcRowsData () {
      let { data, rowNum, sort } = this.mergedConfig

      sort && data.sort(({ value: a }, { value: b }) => {
        if (a > b) return -1
        if (a < b) return 1
        if (a === b) return 0
      })

      const value = data.map(({ value }) => value)
      
      const min = Math.min(...value) || 0

      // abs of min
      const minAbs = Math.abs(min)

      const max = Math.max(...value) || 0

      // abs of max
      const maxAbs = Math.abs(max)

      const total = max + minAbs

      data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: (row.value + minAbs) / total * 100 }))

      const rowLength = data.length

      if (rowLength > rowNum && rowLength < 2 * rowNum) {
        data = [...data, ...data]
      }

      data = data.map((d, i) => ({ ...d, scroll: i }))

      this.rowsData = data
      this.rows = data
    },
    calcHeights (onresize = false) {
      const { height, mergedConfig } = this

      const { rowNum, data } = mergedConfig

      const avgHeight = height / rowNum

      this.avgHeight = avgHeight

      if (!onresize) this.heights = new Array(data.length).fill(avgHeight)
    },
    async animation (start = false) {
      let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this

      const { waitTime, carousel, rowNum } = mergedConfig

      const rowLength = rowsData.length

      if (rowNum >= rowLength) return

      if (start) {
        await new Promise(resolve => setTimeout(resolve, waitTime))
        if (updater !== this.updater) return
      }

      const animationNum = carousel === 'single' ? 1 : rowNum

      let rows = rowsData.slice(animationIndex)
      rows.push(...rowsData.slice(0, animationIndex))

      this.rows = rows.slice(0, rowNum + 1)
      this.heights = new Array(rowLength).fill(avgHeight)

      await new Promise(resolve => setTimeout(resolve, 300))
      if (updater !== this.updater) return

      this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))

      animationIndex += animationNum

      const back = animationIndex - rowLength
      if (back >= 0) animationIndex = back

      this.animationIndex = animationIndex
      this.animationHandler = setTimeout(animation, waitTime - 300)
    },
    stopAnimation () {
      const { animationHandler, updater } = this

      this.updater = (updater + 1) % 999999

      if (!animationHandler) return

      clearTimeout(animationHandler)
    },
  },
  destroyed () {
    const { stopAnimation } = this

    stopAnimation()
  }
}
</script>

<style lang="less">
@color: #1370fb;

.dv-scroll-ranking-board {
  width: 100%;
  height: 100%;
  color: #fff;
  overflow: hidden;

  .row-item {
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  .ranking-info {
    display: flex;
    width: 100%;
    font-size: 13px;

    .rank {
      width: 40px;
      color: @color;
    }

    .info-name {
      flex: 1;
    }
  }

  .ranking-column {
    border-bottom: 2px solid fade(@color, 50);
    margin-top: 5px;

    .inside-column {
      position: relative;
      height: 6px;
      background-color: @color;
      margin-bottom: 2px;
      border-radius: 1px;
      overflow: hidden;
    }

    .shine {
      position: absolute;
      left: 0%;
      top: 2px;
      height: 2px;
      width: 50px;
      transform: translateX(-100%);
      background: radial-gradient(rgb(40, 248, 255) 5%, transparent 80%);
      animation: shine 3s ease-in-out infinite alternate;
    }
  }
}

@keyframes shine {
  80% {
    left: 0%;
    transform: translateX(-100%);
  }

  100% {
    left: 100%;
    transform: translateX(0%);
  }
}
</style>


================================================
FILE: src/components/waterLevelPond/index.js
================================================
import WaterLevelPond from './src/main.vue'

export default function (Vue) {
  Vue.component(WaterLevelPond.name, WaterLevelPond)
}


================================================
FILE: src/components/waterLevelPond/src/main.vue
================================================
<template>
  <div class="dv-water-pond-level">
    <svg v-if="renderer">
      <defs>
        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop v-for="lc in svgBorderGradient" :key="lc[0]"
            :offset="lc[0]"
            :stop-color="lc[1]" />
        </linearGradient>
      </defs>

      <text
        :stroke="`url(#${gradientId})`"
        :fill="`url(#${gradientId})`"
        :x="renderer.area[0] / 2 + 8"
        :y="renderer.area[1] / 2 + 8"
      >
        {{ details }}
      </text>

      <ellipse v-if="!shape || shape === 'round'"
        :cx="renderer.area[0] / 2 + 8"
        :cy="renderer.area[1] / 2 + 8"
        :rx="renderer.area[0] / 2 + 5"
        :ry="renderer.area[1] / 2 + 5"
        :stroke="`url(#${gradientId})`" />

      <rect v-else
        x="2" y="2"
        :rx="shape === 'roundRect' ? 10 : 0"
        :ry="shape === 'roundRect' ? 10 : 0"
        :width="renderer.area[0] + 12"
        :height="renderer.area[1] + 12"
        :stroke="`url(#${gradientId})`" />
    </svg>

    <canvas ref="water-pond-level" :style="`border-radius: ${radius};`" />
  </div>
</template>

<script>
import { uuid } from '../../../util/index'

import { deepMerge } from '@jiaminghi/charts/lib/util/index'

import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

import CRender from '@jiaminghi/c-render'

export default {
  name: 'DvWaterLevelPond',
  props: {
    config: Object,
    default: () => ({})
  },
  data () {
    const id = uuid()
    return {
      gradientId: `water-level-pond-${id}`,

      defaultConfig: {
        /**
         * @description Data
         * @type {Array<Number>}
         * @default data = []
         * @example data = [60, 40]
         */
        data: [],
        /**
         * @description Shape of wanter level pond
         * @type {String}
         * @default shape = 'rect'
         * @example shape = 'rect' | 'roundRect' | 'round'
         */
        shape: 'rect',
        /**
         * @description Water wave number
         * @type {Number}
         * @default waveNum = 3
         */
        waveNum: 3,
        /**
         * @description Water wave height (px)
         * @type {Number}
         * @default waveHeight = 40
         */
        waveHeight: 40,
        /**
         * @description Wave opacity
         * @type {Number}
         * @default waveOpacity = 0.4
         */
        waveOpacity: 0.4,
        /**
         * @description Colors (hex|rgb|rgba|color keywords)
         * @type {Array<String>}
         * @default colors = ['#00BAFF', '#3DE7C9']
         * @example colors = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
         */
        colors: ['#3DE7C9', '#00BAFF'],
        /**
         * @description Formatter
         * @type {String}
         * @default formatter = '{value}%'
         */
        formatter: '{value}%'
      },

      mergedConfig: {},

      renderer: null,

      svgBorderGradient: [],

      details: '',

      waves: [],

      animation: false
    }
  },
  computed: {
    radius () {
      const { shape } = this.mergedConfig

      if (shape === 'round') return '50%'

      if (shape === 'rect') return '0'

      if (shape === 'roundRect') return '10px'

      return '0'
    },
    shape () {
      const { shape } = this.mergedConfig

      if (!shape) return 'rect'

      return shape
    }
  },
  watch: {
    config () {
      const { calcData, renderer } = this

      renderer.delAllGraph()

      this.waves = []

      setTimeout(calcData, 0)
    }
  },
  methods: {
    init () {
      const { initRender, config, calcData } = this

      initRender()

      if (!config) return

      calcData()
    },
    initRender () {
      const { $refs } = this

      this.renderer = new CRender($refs['water-pond-level'])
    },
    calcData () {
      const { mergeConfig, calcSvgBorderGradient, calcDetails } = this

      mergeConfig()

      calcSvgBorderGradient()

      calcDetails()

      const { addWave, animationWave } = this

      addWave()

      animationWave()
    },
    mergeConfig () {
      const { config, defaultConfig } = this

      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config)
    },
    calcSvgBorderGradient () {
      const { colors } = this.mergedConfig

      const colorNum = colors.length

      const colorOffsetGap = 100 / (colorNum - 1)

      this.svgBorderGradient = colors.map((c, i) => [colorOffsetGap * i, c])
    },
    calcDetails () {
      const { data, formatter } = this.mergedConfig

      if (!data.length) {
        this.details = ''

        return
      }

      const maxValue = Math.max(...data)

      this.details = formatter.replace('{value}', maxValue)
    },
    addWave () {
      const { renderer, getWaveShapes, getWaveStyle, drawed } = this

      const shapes = getWaveShapes()
      const style = getWaveStyle()

      this.waves = shapes.map(shape => renderer.add({
        name: 'smoothline',
        animationFrame: 300,
        shape,
        style,
        drawed
      }))
    },
    getWaveShapes () {
      const { mergedConfig, renderer, mergeOffset } = this

      const { waveNum, waveHeight, data } = mergedConfig

      const [w, h] = renderer.area

      const pointsNum = waveNum * 4 + 4

      const pointXGap = w / waveNum / 2

      return data.map(v => {
        let points = new Array(pointsNum).fill(0).map((foo, j) => {
          const x = w - pointXGap * j

          const startY = (1 - v / 100) * h

          const y = j % 2 === 0 ? startY : startY - waveHeight

          return [x, y]
        })

        points = points.map(p => mergeOffset(p, [pointXGap * 2, 0]))

        return { points }
      })
    },
    mergeOffset ([x, y], [ox, oy]) {
      return [x + ox, y + oy]
    },
    getWaveStyle () {
      const { renderer, mergedConfig } = this

      const h = renderer.area[1]

      return {
        gradientColor: mergedConfig.colors,
        gradientType: 'linear',
        gradientParams: [0, 0, 0, h],
        gradientWith: 'fill',
        opacity: mergedConfig.waveOpacity,
        translate: [0, 0]
      }
    },
    drawed ({ shape: { points } }, { ctx, area }) {
      const firstPoint = points[0]
      const lastPoint = points.slice(-1)[0]

      const h = area[1]

      ctx.lineTo(lastPoint[0], h)
      ctx.lineTo(firstPoint[0], h)

      ctx.closePath()

      ctx.fill()
    },
    async animationWave (repeat = 1) {
      const { waves, renderer, animation } = this

      if (animation) return

      this.animation = true

      const w = renderer.area[0]

      waves.forEach(graph => {
        graph.attr('style', { translate: [0, 0] })

        graph.animation('style', {
          translate: [w, 0]
        }, true)
      })

      await renderer.launchAnimation()

      this.animation = false

      if (!renderer.graphs.length) return

      this.animationWave(repeat + 1)
    }
  },
  mounted () {
    const { init } = this

    init()
  },
  beforeDestroy () {
    const { renderer } = this

    renderer.delAllGraph()

    this.waves = []
  }
}
</script>

<style lang="less">
.dv-water-pond-level {
  position: relative;

  svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }

  text {
    font-size: 25px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
  }

  ellipse, rect {
    fill: none;
    stroke-width: 3;
  }

  canvas {
    margin-top: 8px;
    margin-left: 8px;
    width: calc(~"100% - 16px");
    height: calc(~"100% - 16px");
    box-sizing: border-box;
  }
}
</style>


================================================
FILE: src/index.js
================================================
/**
 * IMPORT COMPONENTS
 */
import fullScreenContainer from './components/fullScreenContainer/index'
import loading from './components/loading/index'

// border box
import borderBox1 from './components/borderBox1/index'
import borderBox2 from './components/borderBox2/index'
import borderBox3 from './components/borderBox3/index'
import borderBox4 from './components/borderBox4/index'
import borderBox5 from './components/borderBox5/index'
import borderBox6 from './components/borderBox6/index'
import borderBox7 from './components/borderBox7/index'
import borderBox8 from './components/borderBox8/index'
import borderBox9 from './components/borderBox9/index'
import borderBox10 from './components/borderBox10/index'
import borderBox11 from './components/borderBox11/index'
import borderBox12 from './components/borderBox12/index'
import borderBox13 from './components/borderBox13/index'

// decoration
import decoration1 from './components/decoration1/index'
import decoration2 from './components/decoration2/index'
import decoration3 from './components/decoration3/index'
import decoration4 from './components/decoration4/index'
import decoration5 from './components/decoration5/index'
import decoration6 from './components/decoration6/index'
import decoration7 from './components/decoration7/index'
import decoration8 from './components/decoration8/index'
import decoration9 from './components/decoration9/index'
import decoration10 from './components/decoration10/index'
import decoration11 from './components/decoration11/index'
import decoration12 from './components/decoration12/index'

// charts
import charts from './components/charts/index'

import activeRingChart from './components/activeRingChart'
import capsuleChart from './components/capsuleChart'
import waterLevelPond from './components/waterLevelPond/index'
import percentPond from './components/percentPond/index'
import flylineChart from './components/flylineChart'
import flylineChartEnhanced from './components/flylineChartEnhanced'
import conicalColumnChart from './components/conicalColumnChart'
import digitalFlop from './components/digitalFlop'
import scrollBoard from './components/scrollBoard/index'
import scrollRankingBoard from './components/scrollRankingBoard/index'

/**
 * USE COMPONENTS
 */
export default function (Vue) {
  Vue.use(fullScreenContainer)
  Vue.use(loading)

  // border box
  Vue.use(borderBox1)
  Vue.use(borderBox2)
  Vue.use(borderBox3)
  Vue.use(borderBox4)
  Vue.use(borderBox5)
  Vue.use(borderBox6)
  Vue.use(borderBox7)
  Vue.use(borderBox8)
  Vue.use(borderBox9)
  Vue.use(borderBox10)
  Vue.use(borderBox11)
  Vue.use(borderBox12)
  Vue.use(borderBox13)

  // decoration
  Vue.use(decoration1)
  Vue.use(decoration2)
  Vue.use(decoration3)
  Vue.use(decoration4)
  Vue.use(decoration5)
  Vue.use(decoration6)
  Vue.use(decoration7)
  Vue.use(decoration8)
  Vue.use(decoration9)
  Vue.use(decoration10)
  Vue.use(decoration11)
  Vue.use(decoration12)

  // charts
  Vue.use(charts)

  Vue.use(activeRingChart)
  Vue.use(capsuleChart)
  Vue.use(waterLevelPond)
  Vue.use(percentPond)
  Vue.use(flylineChart)
  Vue.use(flylineChartEnhanced)
  Vue.use(conicalColumnChart)
  Vue.use(digitalFlop)
  Vue.use(scrollBoard)
  Vue.use(scrollRankingBoard)
}


================================================
FILE: src/mixin/autoResize.js
================================================
import { debounce, observerDomResize } from '../util/index'

export default {
  data () {
    return {
      dom: '',

      width: 0,
      height: 0,

      debounceInitWHFun: '',

      domObserver: ''
    }
  },
  methods: {
    async autoResizeMixinInit () {
      const { initWH, getDebounceInitWHFun, bindDomResizeCallback, afterAutoResizeMixinInit } = this

      await initWH(false)

      getDebounceInitWHFun()

      bindDomResizeCallback()

      if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit()
    },
    initWH (resize = true) {
      const { $nextTick, $refs, ref, onResize } = this

      return new Promise(resolve => {
        $nextTick(_ => {
          const dom = this.dom = $refs[ref]

          this.width = dom ? dom.clientWidth : 0
          this.height = dom ? dom.clientHeight : 0

          if (!dom) {
            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
          } else if (!this.width || !this.height) {
            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
          }

          if (typeof onResize === 'function' && resize) onResize()

          resolve()
        })
      })
    },
    getDebounceInitWHFun () {
      const { initWH } = this

      this.debounceInitWHFun = debounce(100, initWH)
    },
    bindDomResizeCallback () {
      const { dom, debounceInitWHFun } = this

      this.domObserver = observerDomResize(dom, debounceInitWHFun)

      window.addEventListener('resize', debounceInitWHFun)
    },
    unbindDomResizeCallback () {
      let { domObserver, debounceInitWHFun } = this

      if (!domObserver) return

      domObserver.disconnect()
      domObserver.takeRecords()
      domObserver = null

      window.removeEventListener('resize', debounceInitWHFun)
    }
  },
  mounted () {
    const { autoResizeMixinInit } = this

    autoResizeMixinInit()
  },
  beforeDestroy () {
    const { unbindDomResizeCallback } = this

    unbindDomResizeCallback()
  }
}


================================================
FILE: src/util/index.js
================================================
export function randomExtend (minNum, maxNum) {
  if (arguments.length === 1) {
    return parseInt(Math.random() * minNum + 1, 10)
  } else {
    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
  }
}

export function debounce (delay, callback) {
  let lastTime

  return function () {
    clearTimeout(lastTime)

    const [that, args] = [this, arguments]

    lastTime = setTimeout(() => {
      callback.apply(that, args)
    }, delay)
  }
}

export function observerDomResize (dom, callback) {
  const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

  const observer = new MutationObserver(callback)

  observer.observe(dom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })

  return observer
}

export function getPointDistance (pointOne, pointTwo) {
  const minusX = Math.abs(pointOne[0] - pointTwo[0])

  const minusY = Math.abs(pointOne[1] - pointTwo[1])

  return Math.sqrt(minusX * minusX + minusY * minusY)
}

export function uuid (hasHyphen) {
  return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
		const r = Math.random() * 16 | 0
		const v = c == 'x' ? r : (r & 0x3 | 0x8)
		return v.toString(16)
  })
}


================================================
FILE: umdExample.html
================================================
<!DOCTYPE html>
<html>
<head>
  <title>DataV</title>
  <script src="https://unpkg.com/vue"></script>
  <!--Debug version-->
  <!--调试版-->
  <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script>
  <!--Compression version-->
  <!--压缩版-->
  <!-- <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.min.vue.js"></script> -->
  <style>
    html, body, #app {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    .border-box-content {
      color: rgb(66,185,131);
      font-size: 40px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div id="app">
    <dv-border-box-1>Welcome to DataV</dv-border-box-1>
  </div>

  <script>
    var app = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>